Charts are an important part of modern websites and applications. They help to present information that cannot be simply represented in text. Charts also help to make sense of data that would ordinarily not make sense in a textual format by presenting them in a view that’s easy to read and understand.
[…]
Vue.js is a progressive JavaScript framework, which we’ll use alongside Chart.js to demonstrate the chart examples. There’s an awesome primer on using Vue.js on Sitepoint and that can be read here. We’ll also be using vue-cli to scaffold a Vue.js project for the demo we are going to build. vue-cli is a simple CLI for scaffolding Vue.js projects. It offers various templates from which an app can be built, but we will be using the webpack template to bootstrap our app.
There are different types of JavaScript charting libraries and various chart wrappers built on Vue.js, but as we are focused on Chart.js in this article, we will be looking at Vue wrappers for Chart.js.
[…]
Let’s get started by installing vue-cli with the following command:
[…]
Now, let’s open the VueChartJS.vue file and type in the following code:
The VueChartJS.vue file contains the template section which holds the HTML code, a script section which holds the JavaScript code and a style section which holds the CSS code.
[…]
For this to work, we’ll need to edit our VueChartJS.vue even further. Open VueChartJS.vue and after the components method, edit with the following code:
[…]
We simply just imported the Chart.js library and hchs-vue-charts wrapper from node_modules and registered it globally with Vue.use(window.VueCharts).
Now let’s get started on this so we can fully demonstrate the usage of vue-charts. Open up the VueCharts.vue file we created earlier and type in the following code.
[…]
Data binding in vue-charts is almost similar to that of vue-chartjs. vue-charts automatically updates the chart whenever the dataset changes.
[…]
We simply just imported the Chartkick library and the vue-chartkick wrapper from node_modules and registered it globally with Vue.use(VueChartkick, { Chartkick }).
[…]
