React — Making Recharts easy to use
A simple way to integrate Recharts in your code and make it actionable by anyone in your team
Data visualization is increasingly used nowadays and that’s why we, developers, are looking for simple solutions to embed charts in web pages or applications.
You can find a lot of libraries on the web, some free and open-source, some providing a paid version, some more or less customizable. Their integration is often done in the same way:
- Import the library (or the component you will need: for example, Bar to do a bar chart)
- Transform your data to make it usable by the library
- Pass your data to the component you have imported with some props to style it
Not that this is very hard to do, but it may seem redundant to do it over and over if you have a lot of charts to display. I am sure you know where this is leading us, and you’re right! We will see how we can make it in one component and generate the chart with only one prop, containing all the options.
As you probably understand from the title of the article, we wanted to discuss the Recharts library and the examples will be done with React. But the methodology to make it easy to use for everyone could also be used on any charts library (Chartist.js, Chart.js, Highcharts, etc.) and any Javascript framework.
If you are not familiar with Recharts, the first part is dedicated to it. We will see how to integrate it into your React components. Then, we will get our hands dirty and see how we can simplify using it. Finally, we will see how simple it will be to add some Charts, even to customize them, in your pages.
For a better understanding of why we are doing this and to show you how easy to use it gets, here is the code to render an area chart after we implement our methodology:
About <Recharts />
Nothing is better than the Recharts Github repo to understand what this library is and how to use it:
Recharts is a Redefined chart library built with React and D3.
The main purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:
Simply deploy with React components.
Native SVG support, lightweight depending only on some D3 submodules.
Declarative components, components of charts are purely presentational.
They also provide an example of integration but there is a lot more on the website, for every type of chart. The documentation is very detailed and they did not lie about the ease of use.
The main advantage of this library compare to free others is customization. You really can do what you want with the chart and its style, making your reporting looking unique.
Below you can see the example to make a simple area chart (without customization except for the color):
As you can see, you have to import all the components you will need from Recharts, transform your data structure to make it usable by the chart and use the component with some props to style the chart. Remember the 3 steps we talked about earlier.
A novice developer will probably use the same methodology every time he would add a chart. A more advanced developer will factorize some part, for example, you can make a component for your tooltip or for you axis Label (they usually the same for all your charts).
It will do the job for sure, but as you can see in the code from above, it will be easier to use if we simply define all our options in one object and pass it to Recharts and it will save you time, especially if you have a lot of charts to create.
So how can we do it?
“They didn’t know it was impossible, so they did it.” Mark Twain
One component to rule them all
This part is not about how to transform your data to make them match the structured expected by Recharts. Every source of data is different and the web is full of tutorials about data transformation. Don’t worry, if some functions use some specific data structured and you will have examples of what is expected.
We will see how we can use Recharts from one component to make all types of charts. To do that we will create together a component with the functions use to customize the chart :
- renderTooltip()
- renderXLabel()
- renderYLabel()
- renderCustomizedLabel()
- renderSeries()
- generateAxisDomain()
- renderXAxis()
- renderYAxis()
- render()
This list is not exhaustive and you can add anything you want. The functions you will see do not contain all the possibilities either, the goal is to show what you can do with this library. Once you understand the concept, it will be easier for you to add any feature you want to customize from the options prop.
Let’s go!
One last step to use it the same as the first example we saw at the beginning of this article: we have to define some default options for the style.
You can also import this default style options directly inside your Recharts component. Like that, you do not have to care about it and if you want to override it, just add your property in the options object.
And the component from the first example now looks like :
To infinity… and beyond!
As you can see, we only got 3 types of charts now (Bar, Line and Area). But what if we want a Pie chart? Do we have to rewrite all this component and change the functions affected by the type Pie?
The answer is No! Javascript gives us the possibility to extends our Recharts class and that’s what we are going to do.
By extending our class, you only have to rewrite the functions you need. So your logic to transform your data, to get your series, etc. stay in your main component.
Below, you will see an example if you want to extend the class to make a RechartsArea by default.
This code is very short and saves you only one line from our previous example but you get the idea.
Now we will what our RechartsPie component will look like
And if you want to do Donut charts, just update the generateDecoration() as for RechartsArea
To use it, it is as simple as for the RechartsArea
You can now repeat this concept for all the types of charts you will reuse a lot in your application. Or for example, if you have a specific component with a special Tooltip render, you will just have to extend the Recharts class and only rewrite this function.
In the main Recharts class that we wrote earlier, we use functions to return the HTML of the tooltip or the axis. But as it is mentioned in the Recharts documentation, it is also possible to write a component for the render. Feel free to use the way you are the most comfortable with.
How we leverage this methodology at ForePaaS
At ForePaas, we use this methodology to allow our users to make any chart from any libraries available on our Platform (Chartist.js, Chart.js, Highcharts, Google Charts, etc.). They have 3 simple ways to do it:
- From the UI: Write directly from our interface to create an application. Even non-developer users are able to create charts
- From a JSON file: The UI will put all the configuration of each chart inside a JSON file. The user can write is JSON directly from the UI or from any integrated development environment (IDE) where the code of the application will be.
- From an IDE: If you want to use or add any customization that is not referenced by default in our app configurator, you can make your own component as you will do without ForePaas. With our platform, you only have to import the Recharts class, extend it and rewrite the component you want to customize (for example, the tooltip). All the functions to transform your data are already written for you.
To wrap up
We hope this article will be helpful for your future chart development. As we already say, it is still work in progress and we wanted to introduce the concept and how to use it rapidly with Recharts and React. But there are a lot of other ways to do it.
If you have done something similar, do not hesitate to comment on this article or ask any questions.
Like what you read? Get in touch! Also, we’re hiring. 🚀
