Getting Started with the Vue Chart Component in Vue 2
1 Mar 202424 minutes to read
This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion Vue Chart component.
To get start quickly with Vue Charts, you can check on this video:
Prerequisites
System requirements for Syncfusion Vue UI components
Dependencies
Below is the list of minimum dependencies required to use the 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, use the vue create command. Follow these steps to install Vue CLI and create a new project:
npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve
or
yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serve
When creating a new project, choose the option Default ([Vue 2] babel, eslint)
from the menu.
Once the quickstart
project is set up with default settings, proceed to add Syncfusion components 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 Charts component as an example. Install the @syncfusion/ej2-vue-charts
package by running the following command:
npm install @syncfusion/ej2-vue-charts --save
or
yarn add @syncfusion/ej2-vue-charts
The –save will instruct NPM to include the chart package inside of the
dependencies
section of thepackage.json
.
Add Syncfusion Vue component
Follow the below steps to add the Vue Chart component:
1. First, 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>
2. In the template
section, define the Chart component.
<template>
<div id="app">
<ejs-chart id="container"> </ejs-chart>
</div>
</template>
Here is the summarized 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 the following command:
npm run serve
or
yarn run serve
Module Injection
Chart component are segregated into individual feature-wise modules. In order to use a particular feature,
you need to inject its feature service in the AppModule. In the current application, we are
going to modify the above basic chart to visualize sales data for a particular year.
For this application we are going to use line series, tooltip, data label, category axis and legend
feature of the chart. Please find relevant
feature service name and description as follows.
-
LineSeries
- Inject this provider to use line series. -
Legend
- Inject this provider to use legend feature. -
Tooltip
- Inject this provider to use tooltip feature. -
DataLabel
- Inject this provider to use datalabel feature. -
Category
- Inject this provider to use category feature.
These modules should be injected to the provide section as follows,
import { ChartComponent, LineSeries } from "@syncfusion/ej2-vue-charts";
export default {
components: {
'ejs-chart': ChartComponent
},
provide: {
chart: [LineSeries]
}
};
</script>
Populate Chart with Data
This section explains how to plot below JSON data to the chart.
export default {
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 }
]
};
}
};
- Add a series object to the chart by using
series
property. Now map the field namesmonth
andsales
in the JSON data to thexName
and
yName
properties of the series, then set the JSON data todataSource
property.
Since the JSON contains category data, set the valueType
for horizontal axis to Category
. By default, the axis valueType is Numeric
.
<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 {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
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'
}
};
},
provide: {
chart: [LineSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
- The sales data are in thousands, so format the vertical axis label by adding $ as a prefix and K as a suffix to each label. This can be achieved by setting the ${value}K to the
labelFormat
property of axis. Here,{value}
act as a placeholder for each axis label.
Add Chart Title
You can add a title using title
property to the chart to provide quick information to the user about the data plotted in the chart.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<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, SeriesDirective, SeriesCollectionDirective, LineSeries, Category } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
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'
},
primaryYAxis:{
labelFormat: '${value}K'
},
title: "Sales Analysis"
};
},
provide: {
chart: [LineSeries, Category]
}
};
</script>
<style>
#container{
height: 350px;
}
</style>
Enable Legend
You can use legend for the chart by setting the visible
property to true in legendSettings
object and by injecting the Legend
into the provide
.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :legendSettings='legendSettings'>
<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, SeriesDirective, SeriesCollectionDirective, LineSeries, Category, Legend } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
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'
},
primaryYAxis:{
labelFormat: '${value}K'
},
legendSettings: {
visible: true
},
title: "Sales Analysis"
};
},
provide: {
chart: [LineSeries, Category, Legend]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Add Data Label
You can add data labels to improve the readability of the chart. This can be achieved by setting the visible property to true in the dataLabel
object and by injecting DataLabel
into the provide
.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :legendSettings='legendSettings'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='month' yName='sales' name='Sales' :marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesDirective, SeriesCollectionDirective, LineSeries, Category, DataLabel, Legend } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
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'
},
primaryYAxis:{
labelFormat: '${value}K'
},
legendSettings: {
visible: true
},
marker: {
dataLabel:{
visible: true
}
},
title: "Sales Analysis"
};
},
provide: {
chart: [LineSeries, Category, DataLabel, Legend]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Enable Tooltip
The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the enable property as true in tooltip
object and by injecting Tooltip
into the provide
.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :tooltip='tooltip'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='month' yName='sales' name='Sales' :marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesDirective, SeriesCollectionDirective, LineSeries, Category, DataLabel, Tooltip } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
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'
},
primaryYAxis:{
labelFormat: '${value}K'
},
marker: {
dataLabel:{
visible: true
}
},
tooltip:{ enable: true },
title: "Sales Analysis"
};
},
provide: {
chart: [LineSeries, Category, DataLabel, Tooltip]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
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.