A month ago, I was exploring Recharts, a ‘composable charting library built on React components’ as I was building an analytics dashboard for my day job. I fell in love with it.
Thus, I decided to tackle the “Waterfall” Chart thanks to this suggestion from their Github Repo and honestly, with the components they have, it’s pretty simple. Here’s how:
The Stacked Bar Chart But Better
To make this as simple as possible, I wanted to make use of the components on Recharts so that I didn’t have to write anything too complex, or write anything from scratch.
I chose the Stacked Bar Chart.
From first glance, you can already tell that we are almost there. All we need to do is:
1. Format your data
2. Hide the bar that’s at the bottom so that the top bar looks like it’s floating
3. Change the colour of bars that are negative in value
It’s as simple as that.
1. Tweaking the Data
Now, I’m going to take the liberty to simplify the data that you’re passing through and also assume that you’ll be tweaking the data on your end dynamically.
The data format we require is as follows (if you require the full view, try out my codesandbox below):
const data = [
{
name: "01/2020",
uv: 2400, // uv is the part of the graph we want to show
pv: 0 // pv is the floating part (transparent)
},
{
name: "02/2020",
uv: -400,
pv: 2400 // to get this pv, we use 01/2020's uv + pv
},
{
name: "03/2020",
uv: -400,
pv: 2000 // use 02/2020's uv + pv, and so forth
},
{ name: "04/2020", uv: 800, pv: 1600 }, ... // fill up as many object data as required { name: "Total", uv: 3700, pv: 0 }
];
As you can see from above, the “name” will be what appears on the x-axis. “uv” is the part of the graph we want to show and “pv” is the transparent portion of the bar.
“uv” can either be a negative or positive value (it’ll help us to determine the colour of the bar to display later!) but “pv” has to be ≥ 0.
The relationship between “uv” and “pv” of the previous data to the current data is as follows:
pv₂ = uv₁ + pv₁ (where 1 is the previous data and 2 is the current)
But at the end of the day, the relationship above might be different for you. So make sure you tweak the data to best suit your needs.
2. Hiding the Bottom Bar
This is just as simple once your data is formatted.
All you have to do is set the Bar that’s taking in the value “pv” to a “transparent” fill whilst keeping the “uv” bar filled with the colour as follows:
<Bar dataKey="pv" stackId="a" fill="transparent" />
<Bar dataKey="uv" stackId="a" fill="#82ca9d" />And just like that, you have a floating bar!
3. Changing the colour of the Bars dynamically
In order to have more control over the Bar’s colours, we have to “open” it up and expose the Cell component.
From there, we map the data and add an ‘if’ statement such that if the value of “uv” is negative, we set the Cell’s fill colour to “#B22222” (a red). Otherwise, it is set to “#228B22” (a green).
If we want the “Total” bar to have a different colour, we simply set another ‘if’ statement to check the name and change the fill colour to “#0000CD” (a blue), as seen below.
<Bar dataKey="uv" stackId="a" fill="#82ca9d">
{data.map((item, index) => {
if (item.uv < 0) return <Cell key={index} fill="#B22222" />; if (item.name === "Total") return <Cell key={index} fill="#0000CD" />; return <Cell key={index} fill="#228B22" />;
})}
</Bar>
And there you have it! A waterfall chart using Recharts only!
Of course, it requires a bit of data tweaking but as you can tell, it isn’t too difficult! If you found this tutorial helpful, let me know by sending some claps my way! (And if you have any other suggestions on what to write, I’d be happy to have a go at them.)
