How can I hide tooltip in Chart.js on a specific data label?
10,975
Solution 1
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/
Solution 2
Update for Chart.js 3:
options: {
plugins: {
tooltip: {
filter: function (tooltipItem, data) {
return tooltipItem.label === "Red";
}
}
}
}
Author by
Admin
Updated on October 17, 2022Comments
-
Admin over 1 year
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?