Black Lives Matter. Please consider donating to Black Girls Code today.

Subplot showing bar graphs grouped and stacked

i am using subplots to display several bar charts, most of which are grouped, but i want 1 bar chart to be stacked. i cannot see how to set the 1 bar chart to be stacked using the fig.update() method.
fig.update_layout(barmode=“stack”, row=r+1, col=c+1), this fails as it does not take rows and cols.

fig.update_xaxes(title_text=“Plan/Actual”, row=r+1, col=c+1), this works fine, but there seems to be nothing for example fig.update_barplot()

drawing a single chart for stacked bar, i can do this.
fig = go.Figure(
data=[
go.Bar(x=[“Plan”, “Actual”], y=[0, 100], showlegend=False),
go.Bar(x=[“Plan”, “Actual”], y=[125, 110], showlegend=False),
],
layout=go.Layout(width=400, height=600, barmode=‘stack’,
title=go.layout.Title(text=“Cost Gross/Nett”, font=dict(family=‘Arial’, size=14), x=0.5)
)
)

but how do i set my subplot bar chart to be barmode=‘stack’

regards
Bruce

Welcome @bruceg ! It looks like setting barmodes per subplot is not supported (update_layout updates parameters of the entire figure). However it seems some people have found workarounds, see this thread:


Also check out multi-category axes:

Hope this helps!

Nicholas

Ok I looked up the combination of grouped and stack item and found it to work for me, by adjusting the width and offset of the bars. Thanks.

I also have some other questions on subplots and adding shapes and annotations to the subplots. When adding these items to subplots they do not all render properly. Sometimes the annotation is not displayed at all and sometimes the shape and or annotation is displayed on the wrong subplot.

Also on the indicator gauge chart, is it possible to show a pointer? As it is now, all I can see, is to show a bar. I think showing a pointer to indicate the value looks much better.

image003.jpg

image002.jpg

Hi @bruceg, I’m glad you solved the bar problem.
As for the annotations, it’s hard to know exactly what’s going on, but when you add a shape, you can use fig.add_shape(dict(...describe shape...),row=<row>,col=<col>) to specify in which subplot the shape should go. You can do a similar thing with fig.add_annotation. I was going to refer you to the documentation, but it seems the annotation documentation doesn’t show adding to a subplot. The shapes documentation does, check it out here :slight_smile:


To show a pointer, you can use the showarrow and arrowhead arguments for add_annotation, read more on this here

Hope this helps :slightly_smiling_face:

Nicholas

I have added a Word document to try and show you the issues with the gauges, add an arrow, and the sub plots adding annotations, where I am having problems.

Can you have a look at this and see if we can move forward with any solutions.

image003.jpg

image002.jpg

image003.jpg

image004.jpg

(Attachment Plotly Sub plots issues and gauge issues.docx is missing)

Hi @bruceg, unfortunately no document was attached. I can’t easily open Word documents anyways, can you post a screenshot instead? Thanks!

Nicholas

I tried to paste the contents of the Word doc in an email that also got rejected. It was all text and 2 images.

At that point I gave up.

image003.jpg

Nicholas

Ok try again with xps attachment.

image003.jpg

(Attachment Plotly Sub plots issues and gauge issues.xps is missing)

Nicholas

Here is the gauge with an arrow added, I can see how to add the arrow but it does not look very good. How can you easily control the arrow to point to the value you want to show. In this example I just draw a vertical arrow, which is easy. But let’s say we want the arrow to point to a point between horizontal and vertical, how to control that? We would have to use sin and cos values to get the co-ordinates of the desired end point.

image001.png

image003.jpg

That’s right, then you use those coordinates as the x and y values of the annotation. Depending on the version of plotly you have, the other end of the arrow (the end with the text) must be specified using relative coordinates in pixels by specifying ax and ay. In a newer version, I believe plotly.js 1.57, ax and ay can be absolute but they have to be the same units as x and y. So the whole annotation assignment would look something like this in plotly.py:

# assuming you're replacing an annotation already in the figure
fig['annotations'][0]=dict(
xref='x',
yref='y',
x=x_calculation_using_cos(...),
y=y_calculation_using_sin(...),
axref='x',
ayref='y',
ax=base_of_arrow_x,
ay=base_of_arrow_y
)

Nicholas

Ok that what I thought. Do you have any examples of this?

Do you intend to add this pointer feature to the gauge charts? Most other charting packages offer a gauge/pointer.

I will try to send the issue with adding annotations and shapes (not all appearing correctly), to subplots later.

image003.jpg