Try charting with Chart.js in Vue

Tram Ho

Preamble

Surely the working ae has touched the statistics of statistics and charting, especially some trading sites, it is very important to have a statistical chart of the number of products sold, best-selling products … . So today I and you learn about a library that supports efficient Chart.js is Chart.js . In this article, I will show you how to use Chart.js in vue  let’s start

Setting

You can install chart.js using npm or yarn

  • npm

    npm install chart.js --save

  • yarn

    yarn add chartjs --save

Create Chart

Step 1:

I will create a component named chartjs.vue with the following content:

Step 2:

The parent component is index.vue file, I imported chartjs.vue file with the following content

and the data has the following content

and this is the result I got

It’s also pretty, isn’t it, no more rambling anymore I will go into the first explanation is in components chartjs.vue in the second line import { Line } from 'vue-chartjs' we see there is {Line} . {Line} here is the type of chart, in addition to Line also

  • bar
  • radar
  • donut and pie
  • polar area
  • bubble
  • scatter

The declaration syntax is similar to import { loại biểu đồ } from 'vue-chartjs' the end, I will take some examples of other chart types. Next we see the props: ['data', 'options'], Here

Data: includes labels and datasets
  • labels: is a set of stickers
  • datasets:
    • data: the value chart.js takes to draw the chart
    • label: note for label (can remove comment)
    • borderColor: color for drawing the chart
options:
  • title is the name of the chart. You can see the details here
  • legend : legend you can turn on and off the legend: { display: true }, by adding the following code legend: { display: true }, are many legend: { display: true }, customizations, you can see the details here . Useful and commonly used as:
  • Responsive : to be able to change the size of the chart There are 2 attributes of Responsive that I use most often
    • maintainAspectRatio: used to keep the ratio (width / length) when the chart size changes
    • aspectRatio: redefine the ratio (width / length)

    There are some other attributes of Responsive you can refer to here

Above are just some of the essential options that I have to give if you have time, you should check out the chart.js homepage to see more. Now I will go into some examples

For example

Bar

Pie

Donut

Similar to Pie

Note : Remember that when you want to use the chart, remember to change the corresponding chart name in the component named chartjs.vue I said above.

Conclude

So I and your friends have learned about how to draw charts with chart.js it is quite simple. Because within an article I can not list all of these, but these are just some of the common things so if you need to dig deeper, you can comment down or on the homepage of chart.js to learn more. Thank you for your interest

References :

[( https://www.chartjs.org/docs/latest/charts/doughnut.html )]

Share the news now

Source : Viblo