Chart.js: Bar chart: omit nulls? (2.0-beta)

[oladon]

Hello again.

I'd like to omit null values from being displayed on a bar chart... is that possible, perhaps via extension? Effectively, I'm attempting to display data grouped by day, but each day could have a different number of data points. Here's a Codepen I set up for this. I can finagle my data into multiple datasets to get it to display in the categorized bar chart form, but nulls cause unsightly blank spots (as you'd normally want). In this case, I'd like to display a varying number of columns per category, instead of assuming nulls are zero.

Any suggestions?

[etimberg]

hey @oladon I think is definitely possible to do (it probably should be in the core as well). You would need to create a controller that derives from the Bar Controller (https://github.com/nnnick/Chart.js/blob/v2.0-dev/src/controllers/controller.bar.js)

You would need a modified getBarCount method and a modified draw method. The getBarCount method would need to take an index (so that it could check for nulls).

To create a new controller, you can do

var NewConstructor = Chart.controllers.bar.extend({
    /* new methods here */
});

[oladon]

@etimberg Thanks. I might delve into that over the weekend.

[etimberg]

Tagging as enhancement to add this behaviour into the core bar controller.

[sneilan]

+1

[jonathanmcdougall]

@etimberg I've spent some time on this yesterday:

It's messier than I expected because lots of different parts are assuming an even width for elements. I've only made it work for my current use case and I know it broke line charts. Basically, anything that uses the category scale needs a new getCategoryPercentage() which returns the percentage of a given element. It's a crappy name, I didn't notice you already had a categoryPercentage in the scale options. It is unrelated.

Label positioning and rotation is somewhat broken right now because Scale.getPixel*() need to be changed too. I wanted to put this patch here early in case it motivated you to work on it :)

contoller.bar.js.patch.txt
scale.category.js.patch.txt

[edit 2018-07-16: Note that many things have changed since I made this patch and that it is unlikely to work. In any case, it never worked very well. I recommend you stay away from it. I have no intention of working on this again.]

[simonerlandsen]

+1

[desai10]

Is this patch available on the core chart.js? or do we still have to modify it ourselves?
@etimberg

[nichalko]

+1

[gustavoaires]

+1

[rando128]

+1

[RIPASSAS]

+1

[ryanxetm]

Hi Guys,

Any updates on this? is this feature is now available on core chart.js? Would also to know if this is also applicable to Vertical group bar.

Many Thanks

[revestment]

+1

[CWSites]

+1

[DieuwerH]

+1

[shridhar-tl]

+1

[shridhar-tl]

+1, I am badly in need of this.

[it-leksand]

i got a some data where there are three sets i want to show, only issue is that the first 4-5 collections are not complete and are missing some of the data availabe for the following collections. for these 4-5 i want to show all sets but the one missing.
i also want to omit tooltip of NaN as i try to add 'null' as values instead

[d3jn]

So can something be done about this yet? Any solutions?

[r8b8]

@it-leksand For hiding NaN from tooltip for null values, try following code in config. I display '-' instead of NaN, you can change the code accordingly.

tooltips: {
    mode: 'index',
    intersect: false,
    callbacks: {
        label: function(tooltipItem, data) {
            var index = tooltipItem.index;
            var datasetIndex = tooltipItem.datasetIndex;
            var label = data.datasets[tooltipItem.datasetIndex].label || '';
            var value = data.datasets[datasetIndex].data[index];
            if (label) {
                label += ': ';
            }
            if (value === null) {
                label += "-";
            } else {
                label += Math.round(tooltipItem.yLabel * 100) / 100;    
            }
            return label;
        }
     }
}

[david-townes]

I accomplished this goal in my local version by making some minor tweaks to the the bar controller, as originally recommended by @etimberg, specifically in the _getStacks function:

 _getStacks: function(last) {
    var me = this;
    var chart = me.chart;
    var scale = me._getIndexScale();
    var stacked = scale.options.stacked;
    var ilen = last === undefined ? chart.data.datasets.length : last + 1;
    var stacks = [];
    var labels = chart.config.data.labels; //so we can match meta.stack to a dataset
    var i, meta, j; //added j so we can iterate over labels
    for (i = 0; i < ilen; ++i) {
        meta = chart.getDatasetMeta(i);
        //find position of meta.stack in label list
        for (j = 0; j < labels.length; j++) {
            if (labels[j] === meta.stack) break;
        }
        if (meta.bar && chart.isDatasetVisible(i) &&
            //We can use i and j to check for blank or missing values and exclude them
            typeof chart.config.data.datasets[j] !== 'undefined' &&
            typeof chart.config.data.datasets[j].data[i] !== 'undefined' &&
            chart.config.data.datasets[j].data[i] !== null &&
            chart.config.data.datasets[j].data[i] != 0 &&
            (stacked === false ||
            (stacked === true && stacks.indexOf(meta.stack) === -1) ||
            (stacked === undefined && (meta.stack === undefined || stacks.indexOf(meta.stack) === -1)))) {
                stacks.push(meta.stack);
        }
    }
    return stacks;
}

[kurkle]

A lot easier to just add .filter(x => x !== null) to the data array.
Pen

Edit: Does not change category widths though