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.

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).

Let's recap the pros and cons of this diverging option:

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.

Let's recap the pros and cons of this diverging option:

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.

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: