-🍔 Easy life: stacked barplot with positive values

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?

-1️⃣ Stacked barplot with negative values: the diverging strategy

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

  • Easy to read the value of each item
  • Obvious what's negative and what's positive

Cons

  • Impossible to know the total value of each stack
  • A series can jump from the bottom to the top of the chart and is thus hard to follow

-2️⃣ Stacked barplot with negative values: the overlapping strategy

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

  • Depending on the group order, the Y value can reflect the sum of the items. But it's not guarantee.

Cons

  • Groups overlap each other. Information is hidden. Chart is unreadable

-Conclusion

In my opinion the first option (diverging) makes much more sense than the second one (overlapping). The cons are very limited:

  • It is true that the net total value is not available. But if that's what interests you, you don't have to split the dataset by subgroups, just create a line chart with a single line!
  • Having a group flipping from top to bottom is indeed annoying. However, the hover effect that is included allows to quickly see what happens for a specific group.

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

Dataviz logo representing a Bar chart.
+

Barplot

Dataviz logo representing a Spider chart.
+

Spider / Radar

Dataviz logo representing a Wordcloud chart.
+

Wordcloud

Dataviz logo representing a Parallel1 chart.
+

Parallel

Dataviz logo representing a Lollipop chart.
+

Lollipop

Dataviz logo representing a CircularBarplot chart.
+

Circular Barplot

Contact

👋 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!

Contact

👋 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!