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

Open the public/index.html file and add the following inside the head tag:

Now if you visit localhost:8080, you should be able to navigate around the shell of the app.

Finally we can move on to creating charts!

Making Charts with vue-chartjs

vue-chartjs is a Chart.js wrapper that allows us to easily create reusable chart components. Reusability means we can import the base chart class and extend it to create custom components.

With that being said, we’ll be demonstrating four types of charts that can be built using vue-chartjs: a line chart, a bar chart, a bubble chart, and a bar chart that demonstrates reactivity (the chart updates whenever there’s a change in the data set).

Line Chart

To create a line chart, we’ll create a component to render this type of chart only. Open the LineChart.vue component file inside the src/components folder and add the following code: