Search results

Getting started with Vue Accumulation Chart component

02 Feb 2023 / 2 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.


System requirements for Syncfusion Vue UI components


The list of minimum dependencies required to use an accumulation chart are follows:

Copied to clipboard
|-- @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.

Copied to clipboard
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.

Copied to clipboard
vue init webpack-simple quickstart

cd quickstart
npm install

Adding Syncfusion Chart package

All the available Essential JS 2 packages are published in registry.

To install chart component, use the following command

Copied to clipboard
npm install @syncfusion/ej2-vue-charts --save

The —save will instruct NPM to include the chart package inside of the dependencies section of the package.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.

Copied to clipboard
import { AccumulationChartPlugin } from '@syncfusion/ej2-vue-charts';


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 the App.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.

Copied to clipboard
<div id="app">
     <ejs-accumulationchart id="container">
            <e-accumulation-series :dataSource='seriesData' xName='x' yName='y'> </e-accumulation-series>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries } from "@syncfusion/ej2-vue-charts";
import { data } from "data.ts";
export default {
  data() {
return {
  seriesData: data
  provide: {
 accumulationchart: [PieSeries]
 #container {
 height: 350px;
  • Now run the application in the browser using the below command.
Copied to clipboard
npm run dev