Getting Started
23 Mar 20233 minutes to read
In EJ2, Accumulation chart is implemented as a separate control to avoid axis related logics. Dependencies
for accumulation chart is same as chart control.
Prerequisites
System requirements for Syncfusion Vue UI components
Dependencies
The list of minimum dependencies required to use an accumulation chart are follows:
|-- @syncfusion/ej2-vue-charts
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-pdf-export
|-- @syncfusion/ej2-file-utils
|-- @syncfusion/ej2-compression
|-- @syncfusion/ej2-charts
|-- @syncfusion/ej2-vue-base
|-- @syncfusion/ej2-svg-base
Installation and Configuration
Setup Vue Environment
You can use Vue CLI
to setup your vue applications.
To install Vue CLI use the following commands.
npm install -g @vue/cli
npm install -g @vue/cli-init
Create a Vue Application
Start a new Vue application using below Vue CLI command.
vue init webpack-simple quickstart
cd quickstart
npm install
Adding Syncfusion Chart package
All the available Essential JS 2 packages are published in npmjs.com
registry.
To install chart component, use the following command
npm install @syncfusion/ej2-vue-charts --save
The –save will instruct NPM to include the chart package inside of the
dependencies
section of thepackage.json
.
Registering Chart Component
You can register the chart component in your application by using the Vue.use()
.
Refer to the code example given below.
import { AccumulationChartPlugin } from '@syncfusion/ej2-vue-charts';
Vue.use(AccumulationChartPlugin);
Registering
ChartPlugin
in vue, will register the chart component along with its required child directives globally.
Adding Chart Component
- Add the Vue Chart by using
<ejs-chart>
selector in<template>
section of theApp.vue
file.
The below example shows a basic Charts,
- Pie Series
By default pie series will be rendered on assigning JSON data to the series by using dataSource
property. Map the field names in the JSON data to the xName
and yName
properties of the series.
<template>
<div id="app">
<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y'> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>
</template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries } from "@syncfusion/ej2-vue-charts";
import { data } from "data.ts";
Vue.use(AccumulationChartPlugin);
export default {
data() {
return {
seriesData: data
};
},
provide: {
accumulationchart: [PieSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
-
Now run the application in the browser using the below command.
npm run dev