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 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'})
The second option was what i was looking for.
Many thanks.