I'm using chart js to show grouped bar chart and try to hide the title of the tooltip
Code to generate bar
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["Chocolate", "Vanilla", "Strawberry"],
datasets: [
{
label: "Blue",
backgroundColor: "blue",
data: [3,7,4]
},
{
label: "Red",
backgroundColor: "red",
data: [4,3,5]
},
{
label: "Green",
backgroundColor: "green",
data: [7,2,6]
}
]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
barValueSpacing: 20,
scales: {
yAxes: [{
ticks: {
min: 0,
}
}]
}
}
});
In the tooltip it showing the labels Chocolate,Vanilla,Strawberry and i have tried to hide the label with following
by setting the titlefontsize to 0 but it doesnt work
tooltipTitleFontSize: 0
and i have tried with the tooltip callbacks it disables the label blue,red,green but i wont need that
tooltips: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;
}
}
}
Help me thanks in advance
To hide the title of tooltip, you need to return an empty function on tooltips title's callback, like so ...
options: {
tooltips: {
callbacks: {
title: function() {}
}
},
...
}
To hide the tooltip title/label, it should be added in the options object for that chart as follows:
options: {
plugins: {
tooltip: {
callbacks: {
title : () => null // or function () { return null; }
}
}
}
}
Do refer to the documentation to understand better that it should be handled with a custom callback function, and it is not a config that can be set in options directly. https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks
I've mentioned the same in this other thread : https://stackoverflow.com/a/68033933/8578337
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With