Creating a chart assembly line with react-chartjs-2
Make different types of graphs taking advantage of the advanced features of the react-chartjs-2 library.
Introduction
I’ve been working with charts for some time, and while there are a lot of libraries that implement them successfully, I feel like it’s usually a struggle to use them in a clean and reusable way. So I’ve been working on a way to implement a reusable solution so anyone could jump in and use it. The idea is not only that this implementation is generic enough to be used in any project, but also to extend it to any new kind of graphic you may need.
Our Challenge
The challenge was to create a generic component that could manage any kind of graphic and that would be simple enough to be maintained and reused over time. In addition to this, we needed a graphics library that could mount different types of graphics with the same data structure received from the backend. This condition was of the utmost importance and was the determining factor when choosing the library for the task.
Just follow these steps and you’ll become a chart ninja!
Select the best library
After a long search, I finally chose the react-chartjs-2 library because it fits my needs almost perfectly. This library is a wrapper of chartjs that has a complete documentation and a large community behind it. It generates easy-to-understand graphics with nice animations without being overwhelming, and in general it is quite customizable.
If you want to check out the basic ways to use this library I recommend that you read this post. Here I will talk about the more complex features of the library.
To mount a graph with react-chartjs-2 we will need a structure similar to this one.
Create a generic Component
After choosing the library it was time to create the generic component. This component receives the props `type` for the type of graphic, `data` that has the graphic information, `width` and `height`. The `options` key includes other customizable stuff like tooltips, labels, axes, and more.
Next, I will specify the GRAPH_TYPES constant and optionsByGraphic function because they are important in the component.
Graph Types
In this constant I defined the types of graphs that we use. Here we match the type sent from the backend with the type that we want to show.
In the future if we want to add a new type of graphic we can just add it here.
Customize the options for Graphic
The react-chartjs-2’s components receive the `options` prop, where we can specify different configuration options like axes, tooltips, labels and legends on the graphics. For this reason we create a optionsForGraphic function to return the configurations according to the type of each graphic.
Well, now let’s take a look at the horizontalGraphicOptions function which returns the key ‘options’ for each graphic. For the ‘tooltips’ key we need to create a different one for each graphic type. For this we create a graphicTooltips function that receives the graphic id and returns the proper tooltip object . We do this because we have two graphics with the same type that need different ‘tooltips’. This is why we use the id of each graphic and not just the type.
Customize the tooltips object
This library provides us with some ‘callbacks’ functions within ‘tooltips’ props where we can overwrite the title, label and afterLabel of each ‘tooltip’. In each callback we can access (tooltipItem, data).
- tooltipItem: gives us access to the current active item.
- data: gives us access to datasets which contain all the values of the graphic.
As I said before, we created a tooltipsGraphic function that returns the tooltip for each graphic id. This way the tooltips object is completely customizable and we are able to meet all of our needs.
Now we can create a different tooltip for each graphic id, and the code of our custom graphic component is simple and easily scalable. If we need to change the axes’ labels we can easily do it.
Working with charts is usually a painful task. I hope this post makes it easier to add them to your project. you can see a real example below. And of course, feel free to comment and give us any feedback you might have!
