Getting Started with the Vue Chart Component in Vue 3

20 Feb 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 matches the project’s style and maintainability goals.

Prerequisites

System requirements for Syncfusion<sup style="font-size:70%">&reg;</sup> 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 create vite@latest

or

yarn create vite

The setup prompts will request a few project options. Example responses used in this article:

1. Define the project name. For this article, use my-project.

? Project name: » my-project

1. Select Vue as the framework.

? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue
  React
  Preact
  Lit
  Svelte
  Others

1. Choose JavaScript as the project variant.

? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
  TypeScript
  Customize with create-vue ↗
  Nuxt ↗

1. After creating the project, install dependencies:

cd my-project
npm install

or

cd my-project
yarn install

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:

npm install @syncfusion/ej2-vue-charts --save

or

yarn add @syncfusion/ej2-vue-charts

Add Syncfusion^® Vue component

Follow the steps below to add the Vue Chart component using the Composition API or Options API:

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.

Composition API (~/src/App.vue)

<script setup>
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Legend, Category } from "@syncfusion/ej2-vue-charts";
</script>

Options API (~/src/App.vue)

<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, Legend, Category, Tooltip } from '@syncfusion/ej2-vue-charts';
//Component registration
export default {
  name: "App",
  components: {
    'ejs-chart' : ChartComponent,
    'e-series-collection' : SeriesCollectionDirective,
    'e-series' : SeriesDirective
  }
}
</script>

1. In the template section, define the Chart component with the dataSource property.

~/src/App.vue

<template>
<ejs-chart id="container" :title='title' :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>

1. Declare the values for the dataSource property in the script section.

Composition API (~/src/App.vue)

<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 }
];
</script>

Options API (~/src/App.vue)

<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 }
    ]
  };
}
</script>

Here is the summarized code for the above steps in the src/App.vue file. Note: examples use different import aliases (for example, the EjChart alias and ChartComponent) — aliases shown match the imports in each example.

Composition API (~/src/App.vue)

<template>
  <ejs-chart id="container" :title='title' :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, Legend, 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 title = 'Sales Analysis';
const primaryXAxis = {valueType: 'Category'};
const chart = [LineSeries, Legend, Category];
provide('chart', chart);
</script>

Options API (~/src/App.vue)

<template>
  <ejs-chart id="container" :title="title" :primaryXAxis="primaryXAxis" :tooltip="tooltip">
    <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, Legend, Category, Tooltip } 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"
          },
          title: "Sales Analysis",
          tooltip: { enable: true },
          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, Legend, Category, Tooltip ]
    },
};
</script>

Verify the chart

• After starting the Dev server, confirm the chart renders correctly:

• Start the development server with npm run dev or yarn run dev.
• Open the project URL shown in the terminal (usually http://localhost:5173) and verify the chart displays.
• If the chart does not render, open the browser console and check for errors related to missing modules, incorrect imports, or incompatible Vue versions.

Troubleshooting (common issues)

• Chart not rendering: ensure the chart modules (for example, LineSeries, Legend, Category, Tooltip, DataLabel) are provided via provide (Options API) or provide() (Composition API).
• Wrong package version: confirm @syncfusion/ej2-vue-charts is compatible with the project’s Vue version.
• Missing child directives: when using series directives, ensure SeriesCollectionDirective and SeriesDirective are registered as shown in the examples.
• Console errors: inspect the browser console for import or runtime errors and verify file paths and dependency installation.

Run the project

To run the project, use the following command:

npm run dev

or

yarn run dev

The output will appear as follows:

Sample: vue-3-chart-getting-started.
For migrating from Vue 2 to Vue 3, refer to the migration documentation.

See also

• Getting Started with Vue UI Components using Composition API and TypeScript
• Getting Started with Vue UI Components using Options API and TypeScript