How can I hide bars with null values in C3.js?

Question

I have a C3 chart with data as given in columns. Notice that there are null values in data1 and in between data 3. C3 is trying to display my bar chart in groupings of 5, creating a separate bar for null values. I'm trying to hide these null values.

var chart = c3.generate({
    data: {
        x : 'x',
        line:{connect_null: true},
        columns: [
            ['x','x1' ,'x2', 'x3', 'x4', 'x5', 'x6', 'x7'],
            ['data1',null ,30, 200, 100, 400, 150, 250],
            ['data2',null ,130, 100, 140, 200, 150, 50],
            ['data3',null ,130, null, 200, 300, -200, 100],
            ['data4',null ,20, -90, 200, 130, -20, 90],
            ['data5',-90, 20, -90, 200, 130, -20, 90]
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'category', // this needed to load string x value
        }
    },
    bar: {
        width: {
            ratio: 0.7 // this makes bar width 50% of length between ticks
        },
        space:0.05
        // or
        //width: 100 // this makes bar width 100px
    }
});

output(https://i.stack.imgur.com/PVei1.png)

How can I hide the bars with null values?