In EJ2, Accumulation chart is implemented as a separate control to avoid axis related logics. Dependencies for accumulation chart is same as chart control.
System requirements for Syncfusion Vue UI components
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
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
Start a new Vue application using below Vue CLI command.
vue init webpack-simple quickstart
cd quickstart
npm install
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
.
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.
<ejs-chart>
selector in <template>
section of the App.vue
file.The below example shows a basic Charts,
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>
npm run dev