Exclude null values ​​from histogram C3.js

Question

Take, for example, the following diagram http://c3js.org/samples/chart_bar.html but replace the column data with the data below:

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 0, 100, 0, 150, 250],
            ['data2', 130, 0, 140, 200, 0, 50]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    }
});

setTimeout(function () {
    chart.load({
        columns: [
            ['data3', 130, -150, 200, 300, -200, 100]
        ]
    });
}, 1000);

As we can see, we have many white squares or bars of ZERO values, how can we remove it and remove the empty space. (don't hide, I know how to hide it with CSS)

Sample image to delete

Answer 1

as googled in https://github.com/c3js/c3/issues/81 you need to replace 0 with "null" and add this:

    line: {
     connectNull: true,
    },

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, null, 100, null, 150, 250],
            ['data2', 130, null, 140, 200, null, 50]
        ],
        line: {
         connectNull: true,
        },
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    }
});

setTimeout(function () {
    chart.load({
        columns: [
            ['data3', 130, -150, 200, 300, -200, 100]
        ]
    });
}, 1000);

Answer 2

Just add

line: {
     connectNull: true,
    }

c3.generate. //... . null, 0.