Creating Beautiful Charts Using Vue.js Wrappers for Chart.js

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.
In this article I will show you how to represent data in the form of various types of chart with the help of Chart.js and Vue.js.
Chart.js is a simple yet flexible JavaScript charting library for developers and designers that allows drawing of different kinds of chart by using the HTML5 canvas element. A good refresher on Chart.js can be read here.
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.
Charts, Charts, Charts
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.
There is an awesome collection of Vue wrappers for charts on the awesome-vue repo on GitHub but we are only interested in the following Chart.js wrappers:


We will be using the various wrappers to demonstrate how to create different types of chart and also touch on the unique features that each of these wrappers possesses.
Scaffolding the Project with vue-cli
Let’s get started by installing vue-cli with the following command:
npm install -g vue-cli

Once that’s done, we can then get started with scaffolding a project by typing in:
vue init webpack my-project

We are specifying that we want a Vue.js app created for us with the webpack template and the name of the project as my-project. Respond to all of the questions and let vue-cli do the rest of the magic. Awesome!
Now let us go ahead to install the dependencies and Chart.js wrappers needed for our app:
npm install chart.js chartkick hchs-vue-charts vue-chartjs vue-chartkick

Tip: If you use npm 5, no need for the –save flag anymore as all packages are automatically saved now. Read more about that here.

This will install all the dependencies and Chart.js Vue wrappers needed. Let’s test what we have so far and run our application and see if the app was successfully created. According to the vue-cli docs, running npm run dev will create a first-in-class development experience in which we can interact and engage with our app. So let’s do that.
npm run dev

You can visit localhost:8080 in your browser to see the welcome page.
Adding Routes
Next thing we want to do is create the different routes in which we can view the charts for each of the wrappers above. At the end, we would like to have a /charts route to display charts made with the vue-charts wrapper, /chartjs to display charts made with the vue-chartjs wrapper, and lastly /chartkick to display charts made with the vue-chartkick wrapper.
Navigate to the router folder of the app and open up theindex.js file. Let’s replace the content of that file with this:
import Vue from ‘vue’ // Import Vue from node_modules
import Router from ‘vue-router’ // Import Vue Router from node_modules
import Home from ‘@/components/Home’ //The Home component that’s in charge of everything we see on the app’s homepage
import VueChartJS from ‘@/components/VueChartJS’ //The VueChartJS component that displays the vue-chartjs charts.
import VueChartKick from ‘@/components/VueChartKick’ //The VueChartJS component that displays the vue-chartkick charts.
import VueCharts from ‘@/components/VueCharts’ //The VueChartJS component that displays the vue-charts charts.

//Specify that we want to use Vue Router

export default new Router({
routes: [
path: ‘/’,
name: ‘Home’,
component: Home
path: ‘/chartjs’,
name: ‘VueChartJS’,
component: VueChartJS
path: ‘/chartkick’,
name: ‘VueChartKick’,
component: VueChartKick
path: ‘/charts’,
name: ‘VueCharts’,
component: VueCharts

Before we discuss the code above, make sure to create the files below in the src/components/ folder. This is done so that the routes defined above have their own component.


So what’s happening in the code block above?
We imported some files which are the Vue components that we created above. Components are one of the most powerful features of Vue. They help us extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue’s compiler attaches behavior to.
Lastly, we defined the routes and components which will serve the different pages we need to display the different charts.
Home Component
As mentioned above, the Home component serves as the default (/) route and we will need to create it. We can do that, or simply rename the existing Hello.vue file to Home.vue and replace the content with the code block below.