Getting Started with the Vue Chart Component in Vue 2

22 Jul 20269 minutes to read

This section provides a step-by-step guide to creating a Vue 2 application using Vue CLI and integrating the Syncfusion® Vue Chart component. It helps users quickly configure a project and render an interactive chart.

Ready to streamline your Syncfusion Vue development?
Discover the full potential of Syncfusion Vue components with the Syncfusion AI Coding Assistant. It simplifies integration, configuration, and feature discovery through intelligent, context-aware code suggestions and is available in popular AI-powered IDEs such as VS Code, Cursor, and Syncfusion CodeStudio.
Explore Syncfusion AI Coding Assistant

To get started quickly with Vue Charts, refer to the following introductory video:

Prerequisites

Ensure your development environment meets the following requirements as listed in System requirements for Syncfusion Vue UI components.

Dependencies

The following are the minimum required dependencies to use the Vue Chart component:

|-- @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

Setting Up the Vue 2 Project

To generate a Vue 2 project using Vue CLI, install Vue CLI globally using either npm or Yarn, and then create a new project with the vue create command:

npm

npm install -g @vue/cli
vue create quickstart

yarn

yarn global add @vue/cli
vue create quickstart

When creating a new project, choose the option Default ([Vue 2] babel, eslint) from the menu.

Vue 2 project

Once the quickstart project is set up with default settings, navigate to the project directory:

cd quickstart

Now, proceed to add Syncfusion® packages to the project.

Add Syncfusion Vue Packages

Syncfusion packages are available at npmjs.com. To use Vue components, install the required npm package.

This article uses the Vue Chart component as an example. To use it in the project, install the @syncfusion/ej2-vue-charts package using either npm or Yarn:

npm

npm install @syncfusion/ej2-vue-charts

yarn

yarn add @syncfusion/ej2-vue-charts

Note: npm v5+ saves packages to dependencies by default; --save is not required.

Add Syncfusion Vue Component

Follow the steps below to add the Vue Chart component:

Step 1: Import and register the Chart component in the script section of the src/App.vue file.

<script>
import { ChartComponent } from '@syncfusion/ej2-vue-charts';

export default {
  components: {
    'ejs-chart': ChartComponent
  }
}
</script>

Step 2: In the template section, define the Chart component.

<template>
  <div id="app">
      <ejs-chart id="container"> </ejs-chart>
  </div>
</template>

Here is the complete code for the above steps in the src/App.vue file:

<template>
  <div id="app">
      <ejs-chart id="container"> </ejs-chart>
  </div>
</template>
<script>
import { ChartComponent } from '@syncfusion/ej2-vue-charts';

export default {
name: "App",
components: {
    'ejs-chart': ChartComponent
  },
  data () {
    return {
    }
  }
}
</script>
<style>
 #container{
   height: 350px;
 }
</style>

Run the Project

To run the project, use either npm or Yarn:

npm

npm run serve

yarn

yarn run serve

Open the generated local URL (for example, http://localhost:8080) from terminal in the browser. The application renders an empty Syncfusion Chart container (350px height) with default axes with no series, displaying a blank chart.

Module Injection

In Vue, register the chart’s feature modules using the component’s provide option.

The Chart component is split into feature-specific modules. To enable a specific feature in a Vue 2
application, register the corresponding module(s) in the component’s provide option. The following example shows the modules used in this guide and their purpose.

  • LineSeries - Register to enable the line series type.
  • Legend - Register to enable the legend feature.
  • Tooltip - Register to enable tooltip support.
  • DataLabel - Register to enable data labels on points.
  • Category - Register to enable category axis support.

Register these modules in the component provide option as shown below (Vue 2):

<script>
import { 
  ChartComponent, 
  LineSeries, 
  Category, 
  Legend, 
  Tooltip, 
  DataLabel 
} from "@syncfusion/ej2-vue-charts";

export default {
  components: {
    'ejs-chart': ChartComponent
  },
  provide: {
    chart: [LineSeries, Category, Legend, Tooltip, DataLabel]
  }
};
</script>

Note: If a required module is not registered, you will encounter an error such as "Series type is not registered" or "Module is not found". Always register all modules used in your chart.

You can also refer to the Feature Modules page for the complete list of available modules and their supported features.

Note: Inject only the modules you actually use to keep the bundle size smaller.

Populate Chart with Data

This section explains how to bind JSON data to the chart.

  • Add a series object to the chart using the series property. Map the fields month and sales in the JSON data to the xName and yName properties of the series, and set the JSON data to the dataSource property.

  • Since the JSON contains category data, set the valueType for the horizontal axis to Category. By default, the axis valueType is Double.

<template>
  <div id="app">
    <ejs-chart id="container" :primaryXAxis="primaryXAxis">
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Line' xName='month' yName='sales' name='Sales'></e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>

<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, Category } from "@syncfusion/ej2-vue-charts";

export default {
  components: {
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective
  },
  provide: {
    chart: [LineSeries, Category]
  },
  data() {
    return {
      seriesData: [ 
            { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
            { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
            { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
            { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
            { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
            { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
          ],
      primaryXAxis: {
        valueType: "Category"
      }
    };
  }
};
</script>

Troubleshooting

Chart is not rendering:

  • Ensure all required modules are registered in the provide option
  • Verify the dataSource is correctly assigned with proper field mappings
  • Check the browser console for any error messages

Module not found error:

  • Confirm that the module is imported from @syncfusion/ej2-vue-charts
  • Verify the module name is spelled correctly in the import statement and provide option

No data is displayed:

  • Check that xName and yName properties match the field names in your data
  • Verify the valueType is set to Category if using category axis
  • Ensure the dataSource array contains data

For more assistance, refer to the Vue Charts API Documentation and the Feature Modules page.

Next Steps

You can refer to our Vue Charts feature tour page for its groundbreaking feature representations. You can also explore our Vue Charts example that shows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.