Recharts Bar Chart Stack Order
Recharts
A simple yet very powerful (based on d3) charts library used in many React based applications, however from time to time you’ll stumble upon an edge case (or may be just a case that is not supposed to be handled by charts 😅) and all of a sudden you just find yourself in need to use that chart library (Recharts in this case) to cover the case.
I’ve been there and believe me when I tell you it’s no easy task to understand the limitations of your library of choice and how to use its quirks and tricks to overcome these limitations and tweak the library to your needs.
Recharts Stacked Bar Charts
Normal Stacked Bar Chart
For those of you who are familiar with the concept of stacked charts it’s safe to just skip this section and go straight ahead to the implementation, but to those of you who are just like me only hearing the word for the first time please keep reading.
We are all familiar with the old good bar chart but what is a stacked bar chart 🤔
A very simple illustration for the stacked bar chart where x-axis represents wells in Gobi desert (if it actually contain wells 😲) and the y-axis represents the total depth of each well, where each color represents a degree of water saltness at the specified depth.
navy being too salty, brown being moderate, and aqua being drinkable water.
The code to generate the above chart is as follows (leaving the imports and the actual rendering to the DOM out):
First the data and its format:
Then the actual StackedBarChart React component:
Now for the sake of argument lets assume that the degree of saltness isn’t that good distributed in wells, meaning that the water saltness can be at any depth so for example lets assume that in well “C” the water is moderate “brown” then salty “navy” then drinkable “aqua”. In the regular bar chart we can’t do this as the order of the data is determined by the order of our <Bar> components in the code as in the above code snippet. How can we do this using Recharts🤔
Custom Ordered Stacked Bar Chart
It turns out that we can do this with Recharts but with some minor changes to the data and a neat trick that is not available in their documentation.
Well let me first show you the code and then I will give you a brief explanation of what’s going on.
First the data and data format, you’ll notice a small change in the data format which is the minor change that we talked about earlier, this is very important in order for out little trick to work. We have added three keys for the data “a”, “b”, and “c”, they can be any thing actually in fact in a real scenario this will be programmatically generated keys either using indexes or a uuid package it just depends on the situation.
Then the actual OrderedStackedBarChart component:
Explanation
As you must have seen we changed the data format a bit, it’s the same data with just a little but very important tweak to serve our purpose here, but I need you to focus on two bits of code where the magic really happens.
getVal function
getVal here takes two argument “obj” and the “key”. All it does it to return the value attribute of the obj[key] (remember out little tweak to the data 😉)
dataKey
It turns out that dataKey attribute of the <Bar> component can take a function as a value where the parameter to that function is the data row and it returns the value the bar will render for that data row, so “val” here represents a row in the data for example:
the key passed to the getVal function here is static “a” in this case but sure it can be dynamic and in fact in a real life application it most certainly will be.
Cell
Cell is another Recharts component that has some mysterious (for me) documentation that lacks how to use it properly, however it’s the component here that is doing all the actual magic. Cells divide the bar horizontally. Imagine the Bar component as a group of Cells not stacked on top of each other but stacked beside each other, let me show you throw this link what I mean by this and hopefully you will understand as I did how Cells actually works with the important piece of information I just gave you (it actually took me a while to understand how Cells actually represents a Bar horizontally not vertically, or at least metaphorically speaking it does gave me an insight of how to use Cells to accomplish my goal here).
After digesting that concept it becomes obvious that the Cell fill color here is the controller in this case in the color of our stacked bar chart and changing it and the value dynamically through getVal function will actually change the color and the order of the stacked bar charts.
Finally
I just want to point out that this is my first medium article and it really took me a while to put it all together, any feedback will be most welcomed and appreciated. If you like it and find it helpful please don’t hesitate to share and feel free to copy, use, or redistribute any part of the code mentioned here for you personal use.
