Exclude zero values from a C3.js bar chart

Question

Let's take for example following chart http://c3js.org/samples/chart_bar.html but replace columns 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 see we have a lot of white space or ZERO value bars, how can we remove it and remove white space. (not hide, I know how to hide it with CSS)

Image example, what should be removed

do you really want to have different spaces between x-ticks? [here](http://stackoverflow.com/questions/27469937/c3js-timeseries-x-values-not-evenly-spaced?rq=1) — vinjenzo, Jan 28 '16 at 14:36
did >[this](http://stackoverflow.com/a/29450998/735725)< help? — vinjenzo, Feb 01 '16 at 10:17
Seems that it doesn't help me, I need to make some changes on CHART BAR not with axis — Ursu Alexandr, Feb 02 '16 at 11:42
hope you ll find your way through it man! this thing looks to me one of those client problems that you cant promise nor say its impossible! — vinjenzo, Feb 02 '16 at 13:02

score 4 · Accepted Answer · answered Nov 29 '16 at 09:19

as googled in https://github.com/c3js/c3/issues/81 you need replace 0 to '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);

I only used null in data and it worked. I did not use connectNull: true. Thanks. — Subhash Diwakar, Jul 18 '19 at 15:15

score 0 · Answer 2 · answered Jul 10 '17 at 12:25

0

Just add

line: {
     connectNull: true,
    }

in your c3.generate block. It will connect all points/bars/... on the chart with a zero value in between. It works with null as well as with 0.

answered Jul 10 '17 at 12:25

philszalay

423
1
3
9

Exclude zero values from a C3.js bar chart

2 Answers2