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

Question

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!

Solution 1

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

Solution 2

If you don't mind a few console messages you can throw an error to exit out of the tooltip method for null values, like so

var myLineChart = new Chart(ctx).Line(data, {
    tooltipTemplate: function (d) {
        if (d.value === null)
            throw '';
        else
            // else return the normal tooltip text
            return d.label + ': ' + d.value;
    }
});

The alternative would be to extend the chart or write a custom tooltips function

---

Fiddle - http://jsfiddle.net/y4zunrx6/

Solution 3

I wanted to disable the tooltip all times. The version I'm using is 2.1.6, and I did it like this:

var options = {
    tooltips : {
        enabled: false      
    }
};

Note: This will not display tool-tip at all, use it only when you want to disable the tool-tip appearing.

Solution 4

Better approach is to customize tooltip template to show no data :

tooltipTemplate: "<%if (label && value){%><%=label%>: <%= value %><%} else {%> No data <%}%>"

View more solutions

Comments

[greenTea2Codes]

Thank you for your answer. I will try it. Meanwhile, I would like to ask how does a beginner like me learn to extend the chart or customize the tooltips? I couldn't find any easy-to-understand documentation about the plugin.

[potatopeelings]

To customize tooltips there's a couple of sample files in the GitHub project. e.g. github.com/nnnick/Chart.js/blob/master/samples/…. extending is easy once you dabble in it for a bit. Just do a console.log of the chart object and you'll get a fair idea of what attributes are there and it's named very well so that you get a fair idea of what each property is. The next step would be taking a look at different extensions and looking at the library code (it's very nicely organized)

[akashrajkn]

This works, but how do you disable tooltips for certain bars? For example, first bar has a tooltip, but second and third don't have

[Prime_Coder]

@akashrajkn For that purpose, instead of options (as I've used above), you need to pass option for individual item and inside each, decide the parameter enabled to be true or false.

[Rohan Deshpande]

Throwing an uncaught error is the top voted answer? For real?

[taystack]

This doesn't answer the original question. How does it have so many up-votes in this context?

[Prime_Coder]

That's the reason I added note below it. Never mind, people sometimes find it helpful to them.

[ephemeral]

where to do that ? mean which file ? @Suraj Pai

[rasputino]

Thanks! great solution! But I would change the return statement for this one: return (value === null || value === 0)? '' : tooltip.label + ': ' + value;