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

Group bar chart with variable sizes for bar widths

I am trying to create a grouped bar chart with more than one trace and varying widths of bars. When I do this, however, the bars overlap.

I tried playing around with offset, and bar group gap. I am unsure of a good solution for this.

Here is what happens when I make the chart.

If there is a bug being tracked for this, or if there is a solution I’m unaware of, please let me know!

I can’t think of another way, so yes it’s a good solution for this.

Then I think I am misunderstanding how to use offset. Below is a code pen of my trying to implement this. Is there a way to keep the axis alignment easily?

I’m not 100% sure what you mean by axis alignment, but here’s what I came up with: https://codepen.io/etpinard/pen/EXXgVg?editors=0010