Overlapping Bar Chart with Smaller Inner Bar & Thicker Outer Bar using 2.7.1

[zaros]

I had tried to implement the solution as referenced in #3946 and this fiddle.

Using 2.4.0 it was working well (-ish! I can't seem to get the bars to align properly)

However in 2.7.1 I can't get the bars to align at all

Any idea why it's like this? I was trying to follow the fiddles from #4154 too, but no luck.

[diegoldev]

I'm having same issue? Is there any update?

[GarethBlain]

I'm trying to do this as well.
With version 2.4 it works as mentioned: https://jsfiddle.net/zk0w5snu/

BUT once you go to 2.5 it no longer overlaps: https://jsfiddle.net/zk0w5snu/1/

THEN when you get to 2.7.2 (current) it is got really messed up: https://jsfiddle.net/zk0w5snu/2/

I have left all of the x-axis showing as I think some of the issue (at least 2.7.2) is due to that. If you look at 2.4 and 2.5 all the x axis are lined up but 2.7.2 is stretched out so the centre of the end two columns are at the edges of the chart and NOT the edges as it should be...

Hope this helps track it down... 😞

[snksergio]

I Found this example: https://jsfiddle.net/20wphvow/195/ on #4154

[nagix]

#4545 introduced the offset scale option, and this is set to false by default in the second category scale. This can be solved by adding offset: true to the second x axis.

scales: {
    xAxes: [{
        id: 'bar-x-axis1',
        // ...
    }, {
        id: 'bar-x-axis2',
        offset: true,
        // ...
    }],
    // ...
}

If you want to overlap bars in different datasets, please also make sure that each dataset has a different xAxisID value, and no stack option is used to specify the ID of the stack group.

See the examples below:
https://jsfiddle.net/nagix/bL8hpk6n/

https://jsfiddle.net/nagix/n6gozqmt/

[acetilholin]

I have 2 overlapped columns. How can I separate them to like on image below?

https://jsfiddle.net/9dvz051g/2/

[rochiey]

I think this does not work on 3.8?