Chart.js: how to hide the tooltip of a specific dataset

[kerron]

Is there a way I can hide the tooltip of a specific datasets in v2-beta? I can hide the data using the callback functions, but this still leaves a tooltip, albeit empty.

Is there a way to hide its entirety?

[etimberg]

At the moment, there is no way to do this. I'd be happy to look over a PR adding this.

[kerron]

thanks @etimberg!

[etimberg]

@kerron if you want to try modifying the library yourself, I'd suggest looking at Core.Tooltip.draw or Core.Tooltip.update in https://github.com/nnnick/Chart.js/blob/v2.0-dev/src/core/core.tooltip.js

I'd be happy to look at a PR adding this functionality

[rjurado01]

Update: see this answer: http://stackoverflow.com/a/37297802/1827284**

---

I modify the library to do this:

First I add tooltip option to _model in updateElement function of each type (radar, doughnut, line...). Bar example:

Chart.controllers.bar = Chart.DatasetController.extend({
  updateElement: function updateElement(rectangle, index, reset, numBars) {
  ...
  helpers.extend(rectangle, {
    ...
    // Desired view properties
    _model: {
      ...
      // Tooltip
      label: this.chart.data.labels[index],
      datasetLabel: this.getDataset().label,
      tooltip: this.getDataset().tooltip,  // Line added !!
      ...

Then I modify Core.Tooltip.draw to add showTooltip condition to if:

Chart.Tooltip = Chart.Element.extend({
  ...
  draw: function draw() {
    ...
    // Check if show dataset tooltip
    var showTooltip =  (this._active[0] && this._active[0]._model.tooltip !== false);

    if (this._options.tooltips.enabled && showTooltip) {

Finally I define this option in my datasets:

this.myChart = new Chart(this.ctx, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [
      { type: 'line', data: data3 },
      { type: 'bar', data: data1, backgroundColor: "#3EAFD5" , tooltip: false},
      { type: 'bar', data: data2, backgroundColor: "#D24B47", tooltip: false}
    ]
  }
}

[qiluo]

Hi, I'm on v2.5, I have a multi datasets in a line chart, and I just wanna show tooltip for one dataset, your solution doesn't work for me, here's my code

data: {
    labels: labels,
    datasets: [
      { data: data3 },
      { data: data1, backgroundColor: "#3EAFD5" , tooltip: false},
      { data: data2, backgroundColor: "#D24B47", tooltip: false}
    ]
  }

Any idea?

[rjurado01]

@qiluo I suggest you using the option filter that you can find in the tooltip documentation:: http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration

[andrei-kondakov]

@qiluo try:

options: {
    tooltips: {
        filter: function (tooltipItem) {
            return tooltipItem.datasetIndex === 0;
        }
    }
}

[qiluo]

hi guys, I successfully hide the tooltip now with above method, thanks

[stewbawka]

I am using the above approach to filter points from the tooltip, but I want to not show the tooltip at all when all points have been filtered out. Right now i'm getting an empty tooltip.

IE: I have a line chart with multiple datasets and a feature to highlight one line by clicking on it and when a line is highlighted only tooltips for that dataset are visible.

[thomasjoscht]

Hey guys,
the solution of @andrei-kondakov was not enough in my case. Also a custom tooltip must be added which resets some tooltip styles like

tooltips: {
      custom: function(tooltipModel) {
        // EXTENSION: filter is not enough! Hide tooltip frame
        if (!tooltipModel.body || tooltipModel.body.length < 1) {
          tooltipModel.caretSize = 0;
          tooltipModel.xPadding = 0;
          tooltipModel.yPadding = 0;
          tooltipModel.cornerRadius = 0;
          tooltipModel.width = 0;
          tooltipModel.height = 0;
        }
      },
      // Hide tooltip body
      filter: function(tooltipItem, data) {
        return !data.datasets[tooltipItem.datasetIndex].tooltipHidden; // custom added prop to dataset
      }

Have a look at my sample https://jsfiddle.net/Lq3aptph/

[Evertvdw]

The solution of @thomasjoscht works perfectly! Only thing I have to add is that you need to add hoverRadius: 0 to the dataset that you are hiding the tooltips from to prevent the increase in size upon hovering.

This is only the case when you want to have that dataset visible ofcourse, in the fiddle the dataset is completely opaque, making this unnecessary.

[KangYoosam]

@andrei-kondakov you saved my life. Thank you!

[tonix-tuft]

@Evertvdw Where did you add hoverRadius: 0? I am using @thomasjoscht hack for line charts as well as for pie charts...

[benmccann]

You can search the docs for hoverRadius: https://www.chartjs.org/docs/latest/configuration/elements.html#point-configuration