CODEWITHSUNDEEP
javascriptjquerychart.js
Julian
Julian

Reputation: 3869

How to disable a tooltip for a specific dataset in ChartJS

I displaying a chart where two types are included. Now I want to hide the toolbar for one dataset. I saw some discussion like this on GitHub, but this doesn't bring me further.

Here is an example of my Chart:

Chart.defaults.global.legend.display = false;
var ctx = document.getElementById("chart").getContext("2d");
var data = {
  labels: ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],
  datasets: [
     {
       label: "Test",
       type: 'bar',
       backgroundColor: "#F29220",
       borderColor: "#F29220",
       data: [4,1,1,2,2,2,2,2,2,2,2,1]
     },
     {
       label: "Test2",
       type: 'bar',
       backgroundColor: "#F29220",
       borderColor: "#F29220",
       data: [4,0,0,0,0,0,0,0,0,0,0,0]
     },
     {
       label: "",
       type: 'line',
       fillColor: "rgba(220,220,220,0)",
       pointColor: "rgba(220,220,220,0)",
       borderColor: "#FF0000",
       tooltip: false,
       data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
     }]
  };
  var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
       scales: {
          xAxes: [{
             stacked: true,
             ticks: {
                fontColor: '#000',
             }
          }],
          yAxes: [{
             stacked: true,
             ticks: {
                beginAtZero: true,
                fontColor: '#000',
                callback: function(label, index, labels) {
                   return label + '%';
                }
             },
          }]
       },
       elements: {
          point:{
             radius: 0
          }
       },
       tooltips: {
          enabled: true,
          mode: 'single',
          callbacks: {
             label: function(tooltipItems, data) {
                 return data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.yLabel + ' %';
          }
       }
    }
 }
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="740" height="370"></canvas>

How can I hide the tooltip just for the line chart? As you can see in the code, I already tried to insert the attribute "tooltip", but this doesn't work.

Upvotes: 27

Views: 26455

Answers (6)

Vemb
Vemb

Reputation: 199

I used Florian Moser's solution above and could not get it to work. For me the solution was to put the filter code under 'options > plugins > tooltip' and not under 'options > tooltips'.

Note the difference in the path and in using the singular form of tooltip. So, working code for me in the chart options:

options: {
  plugins: {
    tooltip: {
      filter: function (tooltipItem) { 
        return tooltipItem.datasetIndex === 0
      }
    }
  }
}

I'm using Chart.js 4.2.1

Upvotes: 5

Florian Moser
Florian Moser

Reputation: 2663

There is now a way to configure charjs to do this; use the filter property:

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

Upvotes: 43

spencer.sm
spencer.sm

Reputation: 20614

The only way I was able to get this to work (v3.6.1) was by setting both pointRadius and pointHitRadius to zero. This also removes the points from the graph for that dataset but in my case that was something I wanted as well.

datasets: [
  {
    data: [...],
    pointRadius: 0,
    pointHitRadius: 0,
  },
]

Upvotes: 1

Sami Al-Subhi
Sami Al-Subhi

Reputation: 4672

You can use this filter:

 tooltips: {
        filter: function (tooltipItem, data) {
             var datasetLabel = data.datasets[tooltipItem.datasetIndex];
             var datapointLabel = data.labels[tooltipItem.index];
             var datapointValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];

              //you can also use tooltipItem.xlabel or ylabel to get datapoint label and value but here it depends on you chart orientation                

              if (datasetLabel=="production" && datapointLabel=="red" && datapointValue<30) {
                   return false;
              } else {
                   return true;
              }
        }
 }

Upvotes: 3

Mark Miller
Mark Miller

Reputation: 309

In the dataset declaration you can pass a parameter to each of the datasets that determines the hit radius (pointHitRadius) for the hover event. If you set this to 0 it will prevent the tooltip from being launch.

noTipDataset = {
    label: "No Tooltips here",
    data: ...,
    pointHitRadius: 0,
    ...The rest of your data declaration here
}

PS: this works in chartJS V2.6 but I haven't tested versions further back

Upvotes: 11

jordanwillis
jordanwillis

Reputation: 10705

As you already concluded, there isn't a way to configure chart.js out of the box to only show tooltips of specific datasets. However, you can use the plugin interface to create a plugin that can provide this functionality.

Here is a plugin that I created for your scenario that let's you configure which datasets you want the tooltip to display for.

Chart.plugins.register({
  // need to manipulate tooltip visibility before its drawn (but after update)
  beforeDraw: function(chartInstance, easing) {
    // check and see if the plugin is active (its active if the option exists)
    if (chartInstance.config.options.tooltips.onlyShowForDatasetIndex) {
      // get the plugin configuration
      var tooltipsToDisplay = chartInstance.config.options.tooltips.onlyShowForDatasetIndex;

      // get the active tooltip (if there is one)
      var active = chartInstance.tooltip._active || [];

      // only manipulate the tooltip if its just about to be drawn
      if (active.length > 0) {
        // first check if the tooltip relates to a dataset index we don't want to show
        if (tooltipsToDisplay.indexOf(active[0]._datasetIndex) === -1) {
          // we don't want to show this tooltip so set it's opacity back to 0
          // which causes the tooltip draw method to do nothing
          chartInstance.tooltip._model.opacity = 0;
        }
      }
    }
  }
});

With the new plugin in place, you can now use a new property in the tooltips config called onlyShowForDatasetIndex that accepts an array of dataset indexes that the tooltip should display for.

tooltips: {
  enabled: true,
  mode: 'single',
  // new property from our plugin
  // configure with an array of datasetIndexes that the tooltip should display for
  // to get the datasetIndex, just use it's position in the dataset [] above in the data property
  onlyShowForDatasetIndex: [0, 1],
  callbacks: {
    label: function(tooltipItems, data) {
      return data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.yLabel + ' %';
    }
  }
}

Where the index value maps to the position of the dataset in the datasets property.

Take a look at this codepen to see this in action. Notice the tooltips only show on the bar charts but not the line (since we did not include this dataset in the new configuration property).

Upvotes: 9

Related Questions