How to disable Chart JS tooltip when there is no value?

greenTea2Codes picture greenTea2Codes · Aug 25, 2015 · Viewed 10k times · Source

I am using Chart JS v.1.0.2. When I have one line and missing data, the tooltip shows x-label.

Does anyone know how to disable the tooltip when the point value is null?

Thanks very much!

Answer

Augusto Barreto picture Augusto Barreto · Apr 27, 2017

Using chart.js 2.3.0 and angular-chart.js 1.1.1, I solved the problem globally by resolving the ChartJsProvider provider in my angular.module('shared').config(...) function and specifying a custom label callback for the tooltips option:

        ChartJsProvider.setOptions({
            tooltips: {
                enabled: true,
                //mode: 'single',
                callbacks: {
                    label: function (tooltipItem, data) {
                        const tooltip = data.datasets[tooltipItem.datasetIndex];
                        const value = tooltip.data[tooltipItem.index];
                        return value === 0 ? null : tooltip.label + ': ' + value;
                    }
                }
            }
        });

By returning null the tooltip is not shown for that specific tooltipItem.

Reference: Chart.js Tooltip Configuration