How do you hide the title of a chart tooltip?

Question

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

Morgen

#35432233 – Silviasilviculture

i have tried that but it doesnt work – Morgen

Answer 1

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() {}
      }
   },
   ...
}

Schuyler

Hi I get an error Types of property 'title' are incompatible. I put it as you mentioned inside callbacks – Eward

The function needs to return something. Just return null and it should work. See here: https://mcmap.net/q/669001/-i-want-to-hide-the-label-in-a-tooltip-because-it-shows-undefined – Heterodyne

Chart.js 4.4, need to return empty string. – Rubetta

Answer 2

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://mcmap.net/q/669001/-i-want-to-hide-the-label-in-a-tooltip-because-it-shows-undefined

Vonnie

This method is more accurate otherwise eslint gives the this error. Unexpected empty method 'title'.eslint@typescript-eslint/no-empty-function -- click for detail link – Artist

Answer 3

According to the Chart.js 4.3.1 documentation for Tooltip Callbacks:

If the callback returns undefined, then the default callback will be used. To remove things from the tooltip callback should return an empty string.

{
    options: {
        plugins: {
            tooltip: {
                // ...other options
                callbacks: {
                    title: () => ''
                }
            }
        }
    }
}

Ave