Create bar chart with percentage share

Hi everyone,

I want to create a bar chart like in the example below, but instead of stacking and adding the two values, I want the lower part (blue part) to be a percentage share of the orange part.
Is it possible to do that in plotly dash python?

Hi @matti welcome to the fourms.

I’m not sure if I understand you correctly, you want the y axis to be percentage?

Hi @AIMPED,

no, the y-axis should be total cost.
The Außendienst value is calculated from the total cost value. Let’s say the percentage share between total cost and Außendienst is 15%, that means the blue part should fill out 15% of the orange part, for 30% it should fill out 30% and so on…

I’m not sure if there is something like this built in. You could just calculate the non- Außendienst value by subtracting from the total an create the chart with these values with barmode=relative

import plotly.express as px
import pandas as pd

# data

# data
a = 0.525
t = 3.5
d = t - a

df = pd.DataFrame({'vals': [a, d]})

# create figure
fig = px.bar(df, x=[0,0], y='vals', color='vals', barmode='relative')

# hide xaxis
fig.update_xaxes(showticklabels=False)

# hide scale
fig.update_layout(coloraxis_showscale=False)

fig.show()

Thank you. That was what i was looking for.

I have another question:
Would it be possible to add a baseline to that bar chart in form of a dashed line? I need that to compare the height of the blue part to the average of other bar charts I used in the past.

Not sure what baseline means.

There are several possibilties, but actually only one lets you define the style (dash, solid…) of the line:

# add zeroline, no line styles available (dash, solid...)
fig.update_yaxes(zerolinewidth=5, zerolinecolor='lightgreen')

# add horizontal line at given y- coordinate, line styles available
fig.add_hline(y=-1, line={'dash': 'dash', 'color': 'red'})

1 Like

The second option was what i was looking for.
Many thanks.