Let's consider a company that has 3 employees: a
, b
and c
. Each month those employees sell umbrellas and make money.
In January, they made 1, 1 and 2 dollars respectively. It's pretty easy to represent those sales as a stacked barplot!
There is even a bonus! The total height of those bars is 4. So is the value of the stack on the Y axis. We now know what's the total revenue of the company 🎉!
Stacking positive values is straightforward
Now let's follow the same process for the 12 months of the year. That makes a stacked area barplot built with react
and d3.js
. If you need explanations for the code, please refer to the d3.js gallery or to the barplot section of the react gallery.
A stacked area chart with positive values only. Built with react and d3.js
That's the end of the easy part. Now, let's say that sometimes employees spend more money than what they make. We now have some negative values in the dataset 😳. How can we deal with it?
We are in January but this time, employee A
lost 1$! 😥
To represent this on the stack, we can add all the positive values on top of the chart, and all the negative ones below the 0 axis.
It is still very easy to see how much each employee made in a glimpse!
However, it is now impossible to know what's the company revenue! Indeed, the total height of the bars is 4
, the value on the y axis is 3
, but the real revenue is 1 + 2 - 1 = 2
!
Stacking with negative values with all negative values below the 0 axis
Using almost the same code we can build the stacked barplot including those negative values. Note that when stacking the data with the stack()
function of d3, the specific stackOffsetDiverging
offset parameter must be passed, handling all the work for us (doc).
With the diverging strategy, all negative values are located under the 0 baseline.
Let's recap the pros and cons of this diverging option:
Pros
Cons
Another strategy can be applied to stack the items including negative values.
Items can be added one by one, with rectangles going up when values are positive and going down when values are negative.
Stacking items by overlapping the items on top of each other.
It's important to understand that here, the item order is important. We will get very different results depending on the order since not all groups are visible.
With the overlapping strategy items are drawn successively, going up and down and overlapping if necessary
Let's recap the pros and cons of this diverging option:
Pros
Cons
In my opinion the first option (diverging) makes much more sense than the second one (overlapping). The cons are very limited:
It's also important to note that most dataviz tools choosed this approach. Here is an example using the same dataset using the ggplot2 library.
Same dataset that includes negative values plotted with ggplot2 (left) and data wrapper (right)
Last but not least, I really like this example by chartio that fix the non available total issue by adding a line on top of the stacked barchart to show the total:
Chartio displays the total of each timestamp using a line chart on top of the stacked items.
Ranking
Barplot
Spider / Radar
Wordcloud
Parallel
Lollipop
Circular Barplot
👋 Hey, I'm Yan and I'm currently working on this project!
Feedback is welcome ❤️. You can fill an issue on Github, drop me a message on Twitter, or even send me an email pasting yan.holtz.data
with gmail.com
. Last but not least, subscribe below to know when I publish more content!
👋 Hey, I'm Yan and I'm currently working on this project!
Feedback is welcome ❤️. You can fill an issue on Github, drop me a message on Twitter, or even send me an email pasting yan.holtz.data
with gmail.com
. Last but not least, subscribe below to know when I publish more content!