Grouped + Stacked Bar chart

RenaudLN · February 7, 2022, 11:44pm

Hi all,

I’ve seen a few topics on this forum and on Github asking how to create a stacked + grouped chart. This may eventually be officially supported by Plotly but in the meantime we can use a workaround with:

Overlayed secondary y-axis
Bar offsets

Here is a minimum reproducible example of my solution. Note that the bar widths and offsets defined in this example are specific to a monthly dataset and would need to be adapted for other kinds of data.

import numpy as np
import pandas as pd
import plotly.graph_objects as go


# Create dummy data indexed by month and with multi-columns [product, revenue]
index = pd.date_range("2020", "2021", freq="MS", closed="left")
df = pd.concat(
    [
        pd.DataFrame(
            np.random.rand(12, 3) * 1.25 + 0.25,
            index=index,
            columns=["Revenue1", "Revenue2", "Revenue3"]
        ),
        pd.DataFrame(
            np.random.rand(12, 3) + 0.5,
            index=index,
            columns=["Revenue1", "Revenue2", "Revenue3"]
        ),
    ],
    axis=1,
    keys=["Product1", "Product2"]
)

# Create a figure with the right layout
fig = go.Figure(
    layout=go.Layout(
        height=600,
        width=1000,
        barmode="relative",
        yaxis_showticklabels=False,
        yaxis_showgrid=False,
        yaxis_range=[0, df.groupby(axis=1, level=0).sum().max().max() * 1.5],
       # Secondary y-axis overlayed on the primary one and not visible
        yaxis2=go.layout.YAxis(
            visible=False,
            matches="y",
            overlaying="y",
            anchor="x",
        ),
        font=dict(size=24),
        legend_x=0,
        legend_y=1,
        legend_orientation="h",
        hovermode="x",
        margin=dict(b=0,t=10,l=0,r=10)
    )
)

# Define some colors for the product, revenue pairs
colors = {
    "Product1": {
        "Revenue1": "#F28F1D",
        "Revenue2": "#F6C619",
        "Revenue3": "#FADD75",
    },
    "Product2": {
        "Revenue1": "#2B6045",
        "Revenue2": "#5EB88A",
        "Revenue3": "#9ED4B9",
    }
}

# Add the traces
for i, t in enumerate(colors):
    for j, col in enumerate(df[t].columns):
        if (df[t][col] == 0).all():
            continue
        fig.add_bar(
            x=df.index,
            y=df[t][col],
            # Set the right yaxis depending on the selected product (from enumerate)
            yaxis=f"y{i + 1}",
            # Offset the bar trace, offset needs to match the width
            # The values here are in milliseconds, 1billion ms is ~1/3 month
            offsetgroup=str(i),
            offset=(i - 1) * 1000000000,
            width=1000000000,
            legendgroup=t,
            legendgrouptitle_text=t,
            name=col,
            marker_color=colors[t][col],
            marker_line=dict(width=2, color="#333"),
            hovertemplate="%{y}<extra></extra>"
        )

fig.show()

Hope that helps some of y’all!

adamschroeder · February 8, 2022, 5:57pm

Very nice trick/workaround. I’ve gotten this question a couple of times. Thanks for sharing this, @RenaudLN.

jedr89 · January 13, 2023, 4:27pm

Hi @RenaudLN ! thank you for this trick. I’m new to python and I was wondering if there’s a way to have discrete values on the index, like ‘California’, ‘Texas’, etc ?
I tried this but it gets stacked all together on the same bar, instead of getting different stacked bars.

RenaudLN · January 13, 2023, 9:45pm

Exactly the same idea, the only thing you have to change is the width and offset. For categorical values, the step is 1 so we want something around 1/3 of that

import numpy as np
import pandas as pd
import plotly.graph_objects as go


# Create dummy data indexed by month and with multi-columns [product, revenue]
index = ["California", "Texas", "Arizona", "Nevada", "Louisiana"]
df = pd.concat(
    [
        pd.DataFrame(
            np.random.rand(5, 3) * 1.25 + 0.25,
            index=index,
            columns=["Revenue1", "Revenue2", "Revenue3"]
        ),
        pd.DataFrame(
            np.random.rand(5, 3) + 0.5,
            index=index,
            columns=["Revenue1", "Revenue2", "Revenue3"]
        ),
    ],
    axis=1,
    keys=["Product1", "Product2"]
)

# Create a figure with the right layout
fig = go.Figure(
    layout=go.Layout(
        height=600,
        width=1000,
        barmode="relative",
        yaxis_showticklabels=False,
        yaxis_showgrid=False,
        yaxis_range=[0, df.groupby(axis=1, level=0).sum().max().max() * 1.5],
       # Secondary y-axis overlayed on the primary one and not visible
        yaxis2=go.layout.YAxis(
            visible=False,
            matches="y",
            overlaying="y",
            anchor="x",
        ),
        font=dict(size=24),
        legend_x=0,
        legend_y=1,
        legend_orientation="h",
        hovermode="x",
        margin=dict(b=0,t=10,l=0,r=10)
    )
)

# Define some colors for the product, revenue pairs
colors = {
    "Product1": {
        "Revenue1": "#F28F1D",
        "Revenue2": "#F6C619",
        "Revenue3": "#FADD75",
    },
    "Product2": {
        "Revenue1": "#2B6045",
        "Revenue2": "#5EB88A",
        "Revenue3": "#9ED4B9",
    }
}

# Add the traces
for i, t in enumerate(colors):
    for j, col in enumerate(df[t].columns):
        if (df[t][col] == 0).all():
            continue
        fig.add_bar(
            x=df.index,
            y=df[t][col],
            # Set the right yaxis depending on the selected product (from enumerate)
            yaxis=f"y{i + 1}",
            # Offset the bar trace, offset needs to match the width
            # For categorical traces, each category is spaced by 1
            offsetgroup=str(i),
            offset=(i - 1) * 1/3,
            width=1/3,
            legendgroup=t,
            legendgrouptitle_text=t,
            name=col,
            marker_color=colors[t][col],
            marker_line=dict(width=2, color="#333"),
            hovertemplate="%{y}<extra></extra>"
        )

fig.show()

jedr89 · January 13, 2023, 10:31pm

Wow! I can’t thank you enough! Thank you thank you so much! @RenaudLN

naomi · January 30, 2023, 3:01am

Can this be done with multiple sub-plots as well ?

RenaudLN · January 30, 2023, 3:03am

I don’t see why not. However managing all the different y axes might become cumbersome.

naomi · January 30, 2023, 3:04am

Is there an easy way to say match my secondary_y axis to the primary of that sub plot ?
v/s match yaxis5 to y, yaxis6 to y2 and so on , assuming 4 subplots here .

RenaudLN · January 30, 2023, 3:07am

There isn’t any builtin way to do this no, you’d have to manage it “manually”. You may be able to reduce the lines of code via a good dict comprehension but still needs to be handled manually.

windrose · May 13, 2023, 8:20pm

@RenaudLN Is it possible to add error bars to the stacked columns?

windrose · May 17, 2023, 5:46pm

Perhaps this grouped and stacked bar chart with error bars is useful for someone too, see Control distance between stacked bars? - #3 by windrose

JohnConor · May 23, 2023, 6:30pm

My college and I are trying to recreate this example but are running into an issue where only data from the final column is being visualized. We have formatted the data in the same way you have and code remains largely the same so cannot understand why only the last variable is being retained. We have posted this question to stackoverflow in the hope of finding a solution - pandas - Grouped and stacked bar charts in Python Plotly - Stack Overflow

Do you know of any reason that might be happening?

JohnConor · May 23, 2023, 6:52pm

We’ve noticed if we limit the number of colors in the colors dictionary to 2, say “Aggression” and “Disruption” in this case, that we are able to have both display in the same figure. Is there any limitation that may be stopping >2 variables being displayed in the figure at once?

emly · September 7, 2023, 3:09pm

Hi @RenaudLN Super helpful trick, thanks for sharing! Was wondering how we could change the hovertemplate to also show the column names (in this case it would be Revenue1, Revenue2 etc.)? I’m still a beginner to Plotly and tried playing around with customdata to no avail.

RenaudLN · September 7, 2023, 3:31pm

If you remove the <extra></extra> in hovertemplate it will keep this on hover:

You can also set hovermode to "x unified" in the layout to get something like this:

And you may want to format the hover value display with something like hovertemplate="%{y:.3f}"

David22 · November 13, 2023, 10:40pm

just adding my 2 cents here;
On categorical axis, if we aim to get space before and after the group of bars, while keeping these bars centered around the xtick, above formula in the offset value does not work.

Assume we want to get 3 bars (each one being actually a stack of bars) whose width = 0.3, then they will be located at -0.45, -0.15, +0.15.

If 3 bars of width = 0.2, then they will be located at -0.3, -0.1, 0.1

Long story short, the formula for the offset will be:

-((n * w)/2) + i* w

id est w * ( i- n/2) where “i” successively takes the value of 0, 1, 2 (cf example provided by RenaudLN), n is the number of bars, and w is the wished bar’s width.

With this, the bars are correctly centered around the xtick;
eg if 3 bars of width 0.3:
0.3 * (0-3/2) = -0.45
0.3 * (1-3/2) = -0.15
0.3 * (2-3/2) = 0.15

RajShah · January 14, 2024, 2:48pm

@RenaudLN I wanted to increase the products to ten and have different products for each regions. The bars are getting erased and I am not able to get the entire plot. Please help

Topic		Replies	Views
Combination of grouped and stacked bar chart plotly.js	10	38281	October 7, 2022
Stacked and grouped bars in same chart 📊 Plotly Python	1	1220	February 6, 2022
How to make a stacked and grouped bar chart in Python? 📊 Plotly Python	2	4959	September 12, 2018
Creating a grouped, stacked bar chart with two levels of x-labels 📊 Plotly Python	2	8040	May 18, 2023
Subplot showing bar graphs grouped and stacked 📊 Plotly Python	10	3749	October 24, 2020

Grouped + Stacked Bar chart

Related topics