Using Chart.js with React

I recently had my first experience working with Chart.js and React. They had very comprehensive documentation, and they get you very excited about working with their library. I want to share some takeaways that I had and also go over some things to keep in mind about working with Chart.js and React.

If you are using React, use chart.js version 2

I initially started off by installing chart.js, however after some googling I realized that this was the wrong version to install since I was working with React. Currently, chart.js version 2 is the version that works with React more seamlessly. To get Started you can simply install react-chartjs-2 by typing the npm command below. If you are not using npm you may have to read the documentation of your package manager for the right command.

npm install react-chartjs-2 chart.js --save

From there it is as simple as importing the charts that you are looking for like so:

import {Bar} from 'react-chartjs-2';

< Bar data={...} />

Integrates with React very well

The set up is simple enough, and if you are familiar with React getting started feels very familiar. The Chart component like any other React Component takes in props, and it is through those props that the Chart knows what to render. The two main props that I came across are the data prop, and the options prop. There are many others as well that you can use to further customize the chart.

Data prop

This prop is really the engine of the chart, and will take in all the data that you want charted. Here you want to structure the data you want to chart out. What is important to remember is to structure it exactly as described in the documentation. Take a look at the example below:

data= {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
        label: "My First dataset",
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [0, 10, 5, 2, 20, 30, 45],
        }]
    }

The data prop is composed of the above basics. The labels key will point to an array of the labels you want displayed on the X axis. The datasets key will point to some additional information about the chart. The label key points to the label for the entire dataset. This is not necessary and your chart will still render without it. The backgroundColor will be the color used for the bars themselves if you are using a Bar chart for example. The most important key here is going to be the data key. This key should point to the data that you want to graph, and you want to structure it as an array of integers. Chart.js does have a lot of defaults so it is very forgiving if you forget some of the other keys. Chart.js could make the chart with no labels as long as you supply it an array of data.

Chart.js is smart

As I was constructing the data prop I wondered if I would have to specify the range for the Y axis. To my surprise Chart.js is smart enough to build the axis for you dynamically based on the data that you feed it. If you did want to customize it further you can by passing in an options prop with additional options.

Sizing the Charts

One thing that I also found interesting, and it is something that a few other users have come across is how to customize the size of the chart. To have the chart accept the additional parameters you must include a special option in the options prop.

maintainAspectRatio: false,

Once that is included you can add width, and height prop directly to the component itself and specify with integers.

        < Line
          data={this.state.chartData}
          options={chartOptions}
          height={500}
          width={700}
          />

Options prop

The options prop content is very comprehensive, and it gives you the ability to manipulate the chart in many ways. Using it for the first time was challenging, but I can appreciate the sophisticated design.

Something that I struggled with for a while was figuring out how to manipulate the ticks that appeared on the side of the chart information. After plenty of trial and error I found out how to format it through the options prop. Take a look at the code below:

scales: {
            xAxes: [
              {
                  ticks: {
                     callback: function(label, index, labels) {
                       return label.toFixed(2) + "%";
                     }
                  }
              }
            ],
            yAxes: [
              {
                  ticks: {
                     callback: function(label, index, labels) {
                       return label;
                     },
                     fontSize: 18,
                     fontColor: 'black'
                  },
                   display: true,
}
            ]
        }

Scales would be a key in the options object that you can pass in. From there you specify the axes that you want to work with. The first key is ‘ticks’, which points to yet another object, which has a key ‘callback’ which points to a callback function. The function takes in a few arguments, and to make changes you simply have to edit the return. If you notice in the example above for the xAxes, I changed the return to return the label.toFixed(2) + “%”. This ensured that my labels were not unnecessarily long decimal points, and added the percent symbol as well. Additionally if you wanted to change other aspects about the information like fontSize, or fontColor, you can add those additional keys to the array.

Setting up your chart does take a while the first time, however it is more straight forward once you practice with it. The structure of it makes it very easy to work with there after, and it lends it self to be very dynamic. I look forward to working more with it in the future.

To learn more about how to work with Chart.js checkout the resources below:

Chart.js · GitBook

jerairrest/react-chartjs-2