✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

How can i plot the multi-category axis bar chart

hi guys,

how can i reproduce the following graph in plotly?

Screenshot 2020-06-25 at 5.49.45 PM

my data looks like:
Screenshot 2020-06-25 at 5.42.41 PM

i have tried the following:

import plotly.express as px
fig = px.bar(df, x="year", y=["predicted","actual"], color='risk, barmode='stack',


but i am not getting two separate bar plots for predicted vs actual. how can i do this??

@Emanuele would appreciate your help :slight_smile:

To my knowledge you cannot do multi-category axis directly with plotly.express and you’ll have to go through the plotly.graph_objects api.

If you reshape your data to look like this:

df = df.melt(id_vars=["year", "risk"], value_vars=["predicted", "actual"])


You could then use the following:

import plotly.graph_objs as go

fig = go.Figure()

for risk in ["low", "medium", "high"]:
    tmp_df = df.query(f"risk == '{risk}'")
            x=[tmp_df["year"], tmp_df["variable"]], y=tmp_df["value"], name=risk,
fig.update_layout(barmode="stack", height=400, width=800, margin=dict(b=60, t=20, l=20, r=20))

Which would give you the expected figure:

@RenaudLN many thanks for this! for some reason i do not get solid colours like you have above, i get faint lines through my bar chart - how can i remove this?

You can set the traces marker opacity:


@RenaudLN thank you it does not work though:

Screenshot 2020-06-26 at 9.56.17 AM

Then set the opacity in go.Bar?

go.Bar(..., marker=dict(opacity=1))

@RenaudLN i tried that i stil get the above graph

Both options work for me, maybe try updating your version of plotly?

@RenaudLN thanks i have the latest one… i think what is happening is that when i hover over the bar the fainter parts of the barchart refer to a lower value and the more dense the colour i.e more opaque the stronger the fill…