javascripttypescriptcanvaschart.js

How can I hide tooltip in Chart.js on a specific data label?


I am trying to hide a tooltip in Chart.js whenever the name of a clicked object is "Something". I have already tried this:

  this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
  type: 'doughnut',
  data: {
    datasets: [{
      label: _.map(this.dataService.AmTimeSlots, 'ProjectName'),
      data: _.map(this.dataService.AmTimeSlots, 'Duration'),
      backgroundColor: _.map(this.dataService.AmTimeSlots, 'Color'),
      hoverBackgroundColor: _.map(this.dataService.AmTimeSlots, 'HoverColor'),
      borderColor: _.map(this.dataService.AmTimeSlots, 'BorderColor'),
      borderWidth: 1.5
    },
    {
      label: _.map(this.dataService.PmTimeSlots, 'ProjectName'),
      data: _.map(this.dataService.PmTimeSlots, 'Duration'),
      backgroundColor: _.map(this.dataService.PmTimeSlots, 'Color'),
      hoverBackgroundColor: _.map(this.dataService.PmTimeSlots, 'HoverColor'),
      borderColor: _.map(this.dataService.PmTimeSlots, 'BorderColor'),
      borderWidth: 1.5
    }],
  },
  options: {
    elements: {
      arc: {
        roundedCornersFor: 0
      }
    },
    segmentShowStroke: false,
    responsive: true,
    maintainAspectRatio: true,
    legend: {
      display: false
    },
    onClick: this.chartClick.bind(this),
    cutoutPercentage: 65,
    tooltips: {
      filter: function (tooltipItem) {
        if (tooltipItem.xLabel == "Free Slot") {
          return false;
        } else {
          return true;
        }
      },
      callbacks: {
        label: function (tooltipItems, data) {
        return data.datasets[tooltipItems.datasetIndex].label[tooltipItems.index];
        },
        afterLabel: function (tooltipItems, data) {
        return Math.floor(data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] / 6) + 'h ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] * 10 % 60 + 'm';
        }
      }
    }
  },
  config: {
    data: this.dataService,
    settings: this.settingsService
  }
});

And this code above is working fine. It’s successfully hiding the text of tooltip, but the problem is that the black label/border still remains. How can I hide it?


Solution

  • You can simply filter tooltips:

    options: {
        tooltips: {
           filter: function (tooltipItem, data) {
               var label = data.labels[tooltipItem.index];
               if (label == "Red") {
                 return false;
               } else {
                 return true;
               }
           }
        }
    }
    

    See this jsfiddle: https://jsfiddle.net/beaver71/ndc2uao2/