Using Chart.js in React
An overview of data visualisation using Chart.js in React
Introduction
Charts and graphs always enhance the visualisation impact in UI. Users can get better understanding of data values through charts and graphs. React developers have many external libraries available to do data visualisation. In this post, let’s try to get an overview of one of the popular React libraries, named Chart.js.
Before we start, I assume that you already have a React project setup. If not, please refer here to get one setup.
Prerequisites also included good understanding of React hooks - useState and useEffect. If you need a refresher on those, please feel free to refer here and here
What are we building?
There are multiple chart types available in Chart.js. For simplicity purpose, we’ll focus on Bar chart. Rest of the charts/graphs can be used in the same fashion. (For detailed documentation of chart types, refer the official documentation here.)
Following is the Bar chart we are going to develop:
Now let’s dive in to the development process.
Installation
Chart.js is a JavaScript library. To use the same in React applications, we need to wrap it with a React library. React-chartjs-2 can be used for this purpose. So, in short, we need to install both the libraries.
First, install Chart.js by running the following command in your project workspace directory:
Run the following command to install react-chartjs-2:
Create component
For displaying the chart, we can either use static data or dynamic data which can be retrieved from an API endpoint. Here I would like to opt for the second method.
As mentioned earlier, the Chart component I am using here is the Bar chart. So we have to import Bar component from react-chartjs-2.
Following are all the import statements needed in our component:
Now fetch the required data that needs to be displayed as chart from the API. (Replace the URL as needed).
In this example, I am fetching details about a class (as in school class) and displaying the class Id and number of students as x and y axis respectively. After fetching the data, we can push in to arrays like below.
classId and noOfStudents are place holders for the array. data and options are the main props to populate next. Also, update the chartData with the help of useState hook.
Following is how we can do it:
Apply beautiful colors of your choice in backgroundColor and set width in borderWidth property, that can be added to the datasets array.
If you want, please refer list of data set properties in Chart.js official documentation here.
Finally in our Bar chart component, specify the options prop as needed. Note the data prop accepts the chartData here.
The complete code for the component is as follows:
Conclusion
This is how we ends up to display Bar chart in our UI as I showed in the beginning of this post. Try replacing Bar component with other chart types such as doughnut, pie, line, radar etc.
Happy coding to all !!
