introduce

Today I would like to introduce a way to make charts in reactjs with chartjs, the library here I mention is react-chartjs2 https://github.com/jerairrest/react-chartjs-2 This library uses chartjs to write components in reactjs (the library chartjs currently has https://github.com/chartjs/Chart.js 47k3 votes, too trustworthy to spend [email protected] @).

Start learning

1. Installation:

Here I have to install 2 libraries: chart.js and react-chartjs-2, I have to pay attention to the version that chartjs is installing, each updated version of chartjs has a different change. While in use there may be no errors, but the configs may lead to unexpected results.

2. Common charts that it can describe:

There are many real-life charts that chartjs can create. There are 3 main groups:

• Bar charts: bar chart The figure below is a bar chart: Vertical, in addition, we can style them as: Vertical, Horizontal, Multi axis, Stacked, Stacked groups
• Line charts: line chart. There are also other types of charts that can style: Multi axis, Stepped, Interpolation, Line styles, Point styles, Point sizes
• Area charts: area chart: The image below is the radar chart – There are also other commonly used forms: Donut, Pie, etc.

3. Usage, writing charts in reactjs:

With chartjs, to draw a chart, we often declare it or use it like this to draw a chart:

The same applies to react-chartjs2, it’s just written into components to make it easier to use.

a) Single column chart:

Now I will start to find out the details. For example, I want to create a bar graph showing information about the world’s pollution level by 2050. Here the basic parameters of the bar chart: pollution values ​​(y-axis), x-axis are the continents. In addition to being easy to see, we add colors, titles of the chart

Data attribute:

• labels: the x-axis sticker
• datasets:
  • The label here is tooltips when we hover over the chart column, it will output: Population (millions): value.
  • data: values ​​-> automatically divide y-axis distance, if you want to divide by hand, we can configure in options -> steps
• options: I just configured basic with this column chart:
  • legend (note): I will make it hidden
  • title: its title, text: is the text of the title

===> The result will be:

====> in the element tree: we will see it generates a canvas tag chart -> chartjs using js code drawn on the canvas:

b) line chart

Another example: draw a chart of the world’s population densities over the years -> we will do a line graph. Here each line is each continent, the value at each point corresponds to the continent’s population in that year

The difference with the single column chart above, the data line chart is 1 array, each element will contain:

• data: population value over the years
• label: continental name
• borderColor: line color
• fill: here to fill or not (color the container area)

Options here:

• title: also the chart graph
• lengend: this time the line chart, we want to display the caption with the position top / right / bottom / left

c) pie chart

Similarly we have 1 example:

Conclude:

react-chartjs2 with chartjs is a duo worth using for drawing charts, because it supports almost all common chart types. In addition, it also supports config to get the corresponding chart or event set (when clicking on each item, etc.)

In addition, it also supports set animation, style gradients, etc. or zooming actions via config extensions (manual code or library also). See you on the next post with more details

Refer

• Chartjs homepage: https://www.chartjs.org/
• React-chartjs2 homepage: https://www.chartjs.org/docs/latest/getting-started/
• Docs: https://www.chartjs.org/docs/latest/getting-started
• Common examples: https://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/