How can I help you?
Getting Started with the Vue Chart Component in Vue 3
21 May 202612 minutes to read
This article provides a step-by-step guide to setting up a Vite project using JavaScript and integrating the Syncfusion® Vue Chart component with either the Composition API or the Options API.
The Composition API groups related logic into reusable functions and is recommended for larger, composition-friendly code bases. The Options API uses data, methods, and life cycle options and may be preferable for smaller components or teams familiar with Vue 2 patterns. Choose the API that best fits your project’s structure and long-term maintainability.
Prerequisites
Ensure that the development environment meets the required criteria listed in System requirements for Syncfusion® Vue UI components.
Set Up the Vite Project
The recommended way to start a Vue 3 application is by scaffolding a project using Vite. Create a new Vite project using one of the following commands:
npm
npm create vite@latestyarn
yarn create viteThe setup prompts will request a few project options. Example responses used in this article:
Step 1: Define the project name. For this article, use my-project.
? Project name: » my-projectStep 2: Select Vue as the framework.
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue
React
Preact
Lit
Svelte
OthersStep 3: Choose JavaScript as the project variant.
? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
Customize with create-vue ↗
Nuxt ↗Step 4: Install dependencies
After the project is created, the CLI prompts you to install dependencies and start the development server:
? Install with <package-manager> and start now?
❯ Yes / NoSelect Yes. The CLI automatically navigates to the project directory, installs all required dependencies, and starts the development server.
Now that my-project is ready, add Syncfusion® Vue components to the project.
Add Syncfusion® Vue Packages
Syncfusion® Vue component packages are available at npmjs.com. To use Syncfusion® Vue components in the project, install the corresponding npm package.
This article uses the Vue Chart component as an example. To use the Vue Chart component in the project, install the @syncfusion/ej2-vue-charts package using either npm or Yarn:
npm
npm install @syncfusion/ej2-vue-charts --saveyarn
yarn add @syncfusion/ej2-vue-chartsAdd Syncfusion® Vue Chart Component
Follow the steps below to add the Vue Chart component using the Composition API or Options API:
Step 1: First, import and register the Chart component and its child directives in the script section of src/App.vue. If using the Composition API, add the setup attribute to the script tag.
<script setup>
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";
</script><script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, Category } from '@syncfusion/ej2-vue-charts';
// Register Chart component and its child directives
export default {
name: "App",
components: {
'ejs-chart' : ChartComponent,
'e-series-collection' : SeriesCollectionDirective,
'e-series' : SeriesDirective
}
}
</script>Step 2: Declare the values for the dataSource property in the script section.
<script setup>
let 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 }
];
let primaryXAxis = { valueType: 'Category' };
</script><script>
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>Step 3: In the template section, define the Chart component with the dataSource property.
<template>
<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>
</template>Here is the summarized code for the above steps in the src/App.vue file.
Note: The Composition API example uses an import alias for ChartComponent, while the Options API example uses ChartComponent directly. The names shown in each example match the corresponding imports.
<template>
<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>
</template>
<script setup>
import { provide } from 'vue';
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";
let 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 }
];
const primaryXAxis = {valueType: 'Category'};
const chart = [LineSeries, Category];
provide('chart', chart);
</script><template>
<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>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, Category } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart' : ChartComponent,
'e-series-collection' : SeriesCollectionDirective,
'e-series' : SeriesDirective
},
data() {
return {
primaryXAxis: {
valueType: "Category"
},
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 }
]
};
},
provide: {
chart: [ LineSeries, Category ]
},
};
</script>Run the Project
To run the project, use either npm or Yarn:
npm
npm run devyarn
yarn run dev- Open the project URL shown in the terminal (usually
http://localhost:5173) and verify the chart displays.
The output will appear as follows:
Sample: You can explore the complete sample project in the
vue-3-chart-getting-startedrepository.
For migrating from Vue 2 to Vue 3, refer to the Vue 3 Migration Guide.
Troubleshooting (Common Issues)
-
Chart not rendering: Ensure that the required chart modules (for example,
LineSeries,Category) are injected usingprovidein the Options API orprovide()in the Composition API. -
Incorrect package version: Verify that the installed
@syncfusion/ej2-vue-chartspackage is compatible with the Vue version used in your project. -
Missing child directives: When using series directives, make sure that
SeriesCollectionDirectiveandSeriesDirectiveare imported and registered as shown in the examples. -
Console errors: Check the browser console for import or runtime errors, and verify that the file paths and package installations are correct.