Preface

Hello everyone, it has been a long time since I wrote the article. As you know, when we go to the dashboard, almost every dashboard template will have a statistical chart, maybe one or a lot of graphs that show up the first time I enter. There are many beautiful charting libraries such as Google Chart, ChartJS, Ember Charts, Smothies Charts, … A multitude of charting library packages, in this article, I would recommend to you libraries Vue Chart for drawing charts is extremely simple and convenient.

Story

The precursor of this library is derived from Chart.js , it is very handy and modern, the library is built on HTML5 canvas. It includes 8 different chart types, easy to extend and config to use in Vue. And above all, the beautiful and eye-catching element is all located in this library.

You can install it via npm or yarn

Or you can use CDN

User manual

I won’t tell you how to set up the project, because some of you use vue cli normally, some you will use nuxtjs, or have you integrated vue right in the laravel project. I will go directly to the problem that is how to create the chart offline

You need to import base and extend them as stars, create a LineChart.vue file

You can replace extends: Line with mixins: [Line] . this.renderChart() is provided by Line component and takes two data and options parameters.

The structure of chartData and options is as follows

If the 2 parameters of the renderChart function you want to pass into the other parent component, you can write as follows

Note that in this file you should not add the <template></template> tag because Vue will not be able to merge the template. If you add the above tag and have no content, Vue will get the empty content from the component without the extend Line section that you declare in the <script></script> tag below, from which it will output. wrong result.

And one more thing I want to say if you want to update data when you change data from the parent component, you can use reactiveProp or reactiveData mixin. Both 2 minxin are essentially the same, but most of us use reactiveProp . It extends from the logic of the chart component and automatically creates prop with the name chartData and chartData this prop to the vue watch to track if the prop changes, the chart it will be able to redraw automatically. When the data changes, it will call to update() if only the data inside the dataset changes or call to renderChart() if a new dataset is added.

reactiveData simply creates the local chartData variable, it is not the prop passed and it is added to the watcher. This is only used if you need to draw charts that call the API and the API call right inside the chart component.

For example

AreaChart.vue

Result:

BarChart.vue

Result:

LineChart.vue