2 Secret Pie Chart Hacks To Up Your Recharts Game | Hacking Recharts #1
If you’ve ever found yourself wanting to create statistical models with ReactJS, you might’ve come across Recharts.
2 months ago, I did. Being tasked to create an analytics dashboard, I had to find the right ReactJS library that could pair with my project — Recharts. Of course it’s still open for debate as to which other library is better, but that’s a discussion for another time.
If you’ve come across Recharts, you should’ve seen their documentation. It is, in my opinion, one of the most immaculate documentation I’ve ever seen. It is clear, it breaks down their components cleanly. It is easy to understand what the components’ props accept. Plus they have a thorough examples page.
But then again, if it’s this thorough, why they heck am I writing this article for?
Well, if you’re someone who wants to do just a biiit more with Recharts, here’s part 1 of some hidden secrets/hacks on Rechart — specifically their pie charts — (along with my codes) that might help you navigate Recharts more effectively.
(psst, there’s a chance that Recharts might improve their documentation or provide alternatives to these secrets so… ya know, keep yourself up to date with the documentation just in case!)
Hidden Secret #1: The Empty Pie Chart
If you’ve tinkered around with the pie chart from Recharts before, you’ll know of a very familiar bug/error if all of your data’s values are ‘0’: the missing pie chart. Yes, it just disappears like a McDonald’s apple pie if you put it in front of me.
So, in order to at the very least show an empty pie chart when the data is 0, here’s what you can do:
For this example, we’ll be playing around with a progress pie chart and we want it to look like the one below.
We’re going to be using an example of: a shop selling bubble tea and wanting to know (1) how many got sold (2) how many are left.
I mean, I think you can kind of tell what’s on my mind as I’m writing this article. A lot of food. It’s late and I need to stop thinking about food.
Let me start with the ‘normal’ pie chart first.
In order to use it, we need to deal with 2 things:
- How the data is formatted
- Mapping the data to each “Cell” accordingly to give different colours for each “Cell” (you can technically skip the mapping if you only have ≤2 data points, but you’ll see later on why I decided to start with mapping instead)
For a normal pie chart, the data format is as follows:
const data = [
{ name: "Bubble Tea Sold", value: 10 },
{ name: "Bubble Tea Left", value: 4 },
];We then call the components required:
And what you get should look like this:
Now, in order for us to create an ‘empty’ pie chart look, all we need to do is to tweak these two things:
- Add an extra data point ‘no value’, but its value is ‘1’ whenever the rest of the data points are 0
const data = [
{ name: "Bubble Tea Sold", value: 0},
{ name: "Bubble Tea Left", value: 0},
{ name: "no value", value: 1 },
];2. Make sure to map the <Cell /> with the correct colour
And tadaa!
There you go! An empty pie chart that doesn’t disappear on you when you need it the most.
Hidden Secret #2: The Two-Line Label In The Centre Of The Pie Chart
This time round, let’s say you require a two-line label in the centre of the pie chart.
Building on from the previous example, you can see that the previous pie chart’s label is on a single line. It is very easily tweaked using the <Label /> component and by positioning it:
<Label
value={data[0].value} // the number you see in the center
position="center" // where the 'value' is positioned
/>However, for some strange reason, you just cannot fit two lines in one label. I mean, heck, what if I want to do something like:
It is impossible with just <Label /> and its complexity rises when you have to create your own CustomLabel.
Now, be warned — this will take a bit of tweaking on your end to get it right for your own example, so don’t follow the numbers in this code to a T!
Compared to the previous example, we need to use the ‘content’ prop and pass our own CustomLabel component.
<Label
content={<CustomLabel noOfBubbleTeaSold={data[0].value} />}
position="center"
/>I’ve passed through a prop ‘noOfBubbleTeaSold’ just to make it easier to use.
Now, here comes the main bulk: the CustomLabel itself.
Let me break down what’s happening in the code snippet above.
Firstly, in order to have 2 separate lines of codes, we need to use a <text /> which is pretty much the equivalent of a <br /> in HTML:
<text>
...
</text>
<text>
...
</text>Secondly, within the <text />, we have a <tspan /> which is where your actual text lies in:
<text>
<tspan
style={{
... // some styling you can add to your text here
}}
>
{noOfBubbleTeaSold} // or whatever text you want here
</tspan>
</text>Finally, in order to position the lines and text, we need to introduce a viewBox (which has cx and cy automatically sent to CustomLabel through ‘content’) and also manually tweak the overall value of x and y of <text />. This is pretty much the equivalent of using a transform-translate in CSS.
const CustomLabel = ({ viewBox, noOfBubbleTeaSold = 0 }) => {
const { cx, cy } = viewBox; <text x={cx - 15} y={cy - 5}>
... // all your <tspan />s are here
</text> ...
};
And once you have the lines at the x and y positions that you want, you’ll end up with:
Which honestly is a lot more arduous than you’d think.
I do hope Recharts would improve on this side of the documentation or improve how the Pie Charts work but I think it’ll take some time before it happens. So meanwhile, here’s the hack!
And that’s pretty much it!
I’m sure there are more ‘hacks’ to the pie charts in Recharts, so if you can think of anything else that isn’t in their documentation, feel free to share it! (Or even write your own post and let me know ;))
But anyway, if you liked this, I’ve written a previous ‘hack’ on Recharts too:
Psst, I’ll be releasing a second part talking about Recharts bar chart hacks! So keep your eyes peeled!
And if you require the full codes, here’s my codesandbox:
