Plotly: Grouped Bar Chart with multiple axes

Question

When I set barmode='group' in Layout while trace2 = Bar(...,yaxis='y2'), this leads bars to be stacked or overlayed instead of grouping them. How can I group the bars while having multiple axes?

I went over these but no avail:

• With single Y axis grouped bar chart is shown here.
• Multiple axes is also explained here and reference for y-axis is available here

Solution 1

I hope the code below, based on zoo example, will be self-explanatory, however you have to set yaxis and offsetgroup parameters in go.Bar() object, and also yaxis2 parameter in layout parameter of go.Figure() object properly. The code is following:

import plotly.graph_objects as go
animals=['giraffes', 'orangutans', 'monkeys']

fig = go.Figure(
    data=[
        go.Bar(name='SF Zoo', x=animals, y=[200, 140, 210], yaxis='y', offsetgroup=1),
        go.Bar(name='LA Zoo', x=animals, y=[12, 18, 29], yaxis='y2', offsetgroup=2)
    ],
    layout={
        'yaxis': {'title': 'SF Zoo axis'},
        'yaxis2': {'title': 'LA Zoo axis', 'overlaying': 'y', 'side': 'right'}
    }
)

# Change the bar mode
fig.update_layout(barmode='group')
fig.show()

The result looks like this:

Solution 2

For those coming across this post now, plotly now has a offsetgroup attribute in bar graphs that solves this issue. Setting barmode='grouped' still does not work.

Comments

[iustin]

I have the same issue, and I tested that it's broken in their web editor as well, so I filled github.com/plotly/plotly.js/issues/78. Not sure whether this applies to only some backends or not, but the JS component is the only one with a public bug tracker.

[tozCSS]

Thanks but you have 2 separate graphs here. I was looking for a grouped bars of only two traces on a single x axis (like the zoo example here); with two y axes each on one side, one on the left and one the right, similar to the first example here. Is this possible? Thanks !