The vue-chartjs library lets us add charts to a Vue app easily.
In this article, we’ll look at how to add charts to a Vue app with vue-chart.js
Installation
We can install the package with chart.js by running:
yarn add vue-chartjs chart.js
or:
npm install vue-chartjs chart.js --save
chart.js is a required dependency.
Creating our first Chart
Now we can create our first chart by creating a new component.
For example, we can write:
components/LineChart.vue
<script>
import { Line, mixins } from "vue-chartjs";
const { reactiveProp } = mixins;
export default {
extends: Line,
mixins: [reactiveProp],
props: ["chartData", "options"],
mounted() {
this.renderChart(this.chartData, this.options);
}
};
</script>
App.vue :
<template>
<div>
<line-chart :chart-data="data" :options="options"></line-chart>
</div>
</template>
<script>
import LineChart from "./components/LineChart.vue";
export default {
components: {
LineChart
},
data() {
return {
data: {
labels: ["Monday", "Tuesday", "Wednesday"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3],
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false
}
};
},
methods: {}
};
</script>
We created the LineChart component to display a line chart.
It takes the chartData prop with the chart data.
And it takes an options prop with the chart options.
The extends property is set to Line so that we can display a line chart.
Then we can call this.renderChart to display the chart with the data and options.
In App.vue , we get the line-chart component that we created and use it to display our chart.
We pass in the data to the chart-data prop and the options to the options prop.
responsive makes the chart responsive.
And maintainAspectRatio keeps the aspect ratio of the chart the same regardless of screen size.
The label has the label for the chart.
labels has the x-axis labels.
backgroundColor is the background color for the fill between the line and the x-axis.
data has the y-axis values.
The reactiveProp mixin lets our chart responds to prop changes.
Now we should see a line chart displayed.
Events
The chart emits various emits. They include:
chart:render– emitted if the mixin performs a complete rerenderchart:destroy– emitted if the mixin deletes the chart object instancechart:update– emitted if the mixin performs an update instead of a re-renderlabels:update– emitted if new labels were setxlabels:updateemitted if new x-axis labels were setylabels:update– emitted if new y-axis labels were set
Own Watcher
We can add our own watcher with and call the this.$data._chart.update() method to update the chart when the chart data updates.
For example, we can write:
<script>
import { Line } from "vue-chartjs";
export default {
extends: Line,
props: ["chartData", "options"],
mounted() {
this.renderChart(this.chartData, this.options);
},
watch: {
chartData() {
this.$data._chart.update();
}
}
};
</script>
then we watch for changes to the chartData prop and update the chart accordingly.
This is useful is we want to transform the line chart in the line chart component.
Conclusion
We can add charts to a Vue app easily with the vue-chartjs component.
