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

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)
screen shot 2018-02-02 at 1 09 14 am

However in 2.7.1 I can’t get the bars to align at all
screen shot 2018-02-02 at 1 08 34 am

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

Author: Fantashit

1 thought on “Overlapping Bar Chart with Smaller Inner Bar & Thicker Outer Bar using 2.7.1

  1. #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/
    Screen Shot 2019-05-22 at 6 27 17 PM

    https://jsfiddle.net/nagix/n6gozqmt/
    Screen Shot 2019-05-22 at 6 27 29 PM

Comments are closed.