6

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!

greenTea2Codes
  • 133
  • 1
  • 1
  • 9

4 Answers4

3

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/

potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • 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. – greenTea2Codes Aug 26 '15 at 11:47
  • To customize tooltips there's a couple of sample files in the GitHub project. e.g. https://github.com/nnnick/Chart.js/blob/master/samples/line-customTooltips.html. 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) – potatopeelings Aug 26 '15 at 12:07
  • 1
    Throwing an uncaught error is the top voted answer? For real? – Rohan Deshpande Nov 06 '16 at 01:56
3

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

Augusto Barreto
  • 3,637
  • 4
  • 29
  • 39
  • Thanks! great solution! But I would change the return statement for this one: `return (value === null || value === 0)? '' : tooltip.label + ': ' + value;` – rasputino Jul 16 '20 at 07:18
2

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.

Prime_Coder
  • 161
  • 2
  • 14
  • 1
    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 – akashrajkn Aug 19 '16 at 05:54
  • @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. – Prime_Coder Aug 21 '16 at 08:02
  • 7
    This doesn't answer the original question. How does it have so many up-votes in this context? – taystack May 09 '17 at 16:15
  • That's the reason I added note below it. Never mind, people sometimes find it helpful to them. – Prime_Coder May 10 '17 at 15:01
1

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

tooltipTemplate: "<%if (label && value){%><%=label%>: <%= value %><%} else {%> No data <%}%>"
Suraj Pai
  • 11
  • 1