Plotly: Grouped and Stacked barchart, different colors for stacked bars?

Question

I have barchart that is both grouped and stacked. Now I want to color the Values that are stacked in a different color. My plot currently looks like this (with a marker of the parts that should be colored differently):

The group corresponds to a category and the stacking is based on delta between two value columns (the delta is stacked on top of the lower values). I want to color the delta (ie the upper part of the stacked bar) in a slightly lighter color (here: light blue for Cat1 and light red for Cat1 ). However, I cannot find an appropriate option for doing so.

My data looks like this:

import pandas as pd

data = [
    ["Station1", 2.5, 3.0, "Cat1"],
    ["Station1", 3.7, 4.2, "Cat2"],
    ["Station2", 1.7, 2.1, "Cat1"],
    ["Station2", 3.9, 4.0, "Cat2"],
]
df = pd.DataFrame(data, columns=["station", "val1", "val2", "category"])
df["delta"] = df["val2"] - df["val1"]

And here is the plotting function:

import plotly.express as px

px.bar(df, x="station", y=["val1", "delta"], color="category", barmode="group").show()

How can I color the delta differently? The solution can also be in plotly (does not have to be plotly express). Is there a way to do the workaround of manually computing the delta column?

Answer 1

I've put together a suggestion that should fit your needs pretty well. At least visually as long as delta >=0 . To my knowledge, grouped and stacked bar charts are still a bit tricky. But building two different figures using px.Bar and then combining them using fig._data in a go.Figure object() will let you build this:

As you will see from the code, delta has not been explicitly implemented, but rather appears visually between the opaque bars and the non-opaque bars. If this is something you can use I'll see if I can include delta in the hoverinfo.

Complete code:

import pandas as pd
import plotly.express as px
import plotly.graph_objects as go

data = [
    ["Station1", 2.5, 3.0, "Cat1"],
    ["Station1", 3.7, 4.2, "Cat2"],
    ["Station2", 1.7, 2.1, "Cat1"],
    ["Station2", 3.9, 4.0, "Cat2"],
]
df = pd.DataFrame(data, columns=["station", "val1", "val2", "category"])
df["delta"] = df["val2"] - df["val1"]

fig1_data = px.bar(df, x="station", y=["val1"], color="category", barmode="group")._data
fig2_data = px.bar(df, x="station", y=['val2'], color="category", barmode="group")._data

fig1_data[0]['marker']['color'] = 'rgba(255,0,0,1)'
fig1_data[1]['marker']['color'] = 'rgba(0,0,255,1)'

fig2_data[0]['marker']['color'] = 'rgba(255,0,0,0.2)'
fig2_data[1]['marker']['color'] = 'rgba(0,0,255,0.2)'

dat = fig1_data+fig2_data
fig = go.Figure(dat)

fig3 = go.Figure(fig._data)
fig.update_layout(barmode='relative', title_text='Relative Barmode')
fig3.show()