Barchart with bars "behind" each other, with multiple axes

plotly.js
1

If I have 2 bar charts, each of which share an X axis, but have different Y-axes, eg Y0 = “top-speed-of-car (m/s)”, Y1=“cost of car (£)”, X = “brand of car (Jaguar,Ford,BMW)” then I’d expect to get a parallel bar chart, like this: https://i.stack.imgur.com/lVxUC.png

But instead, I get a “one chart on top of the other” chart, like this image below. The reason for needing different Y-axes is either that the dimensions are different, or that the Y-magnitudes are radically different.

Can someone tell me what I’m doing wrong? Thanks :slight_smile:

bar-overlap-bug
bar-overlap-bug3744×1524 160 KB

2

I fixed this. For anyone finding this later, the right solution is to use “offsetgroup”: for each trace, set a different value. E.g. traces[j].offsetgroup = j;

There is another approach, involving creating hidden dummy series: