Creating Beautiful Charts Using Vue.js Wrappers for Chart.js
public/index.html file and add the following inside the
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet">
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).
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: