Bar-chart's columns are overlapping on sparse data

[strizhechenko]

JSFeedle: https://jsfiddle.net/tymufe5x/

var chart = c3.generate({
    data: {
        columns: [
            // light sparse is ok:
            // ['value', 1, 2, 4],
            // ['percent', 10, 20, 30]

            // no sparse is ok too
            // ['value', 1, 2, 3, 4, 5],
            // ['percent', 10, 20, 30, 40, 50]

            // but this way columns 1 and 2 are overlapping 
            ['value', 1, 2, 5],
            ['percent', 10, 20, 30]
        ],
        x: 'value',
        type: 'bar'
    },
});

Versions:

• c3: 0.7.20 + d3: 4.13.0
• c3: 0.7.20 + d3: 5.9.2
• I checked old versions too: c3 0.4.11-rc4 + d3 3.x.
• OS: MacOS 10.14.2
• Browsers: Safari 12.0.2 and Firefox 79
• Problem also reproduced in Firefox 79 on Ubuntu Linux 18.04

[Zenthae]

you can use

bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    }

https://c3js.org/reference.html#bar-width-ratio