Chart js how to hide tooltip title?

Im using a js chart to show the grouped bar chart and try to hide the title of the tooltip

Code to create a string

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 showing the labels "Chocolate", "Vanilla", "Strawberry", I tried to hide the label with the following

setting titlefontsize to 0, but it doesn't work

tooltipTitleFontSize: 0

      

and I tried using tooltip callbacks which disables the blue, red, green shortcut, but I don't need to

 tooltips: {
        callbacks: {
           label: function(tooltipItem) {
                  return tooltipItem.yLabel;
           }
        }
    }

      

Help me ahead of time

+3


source to share


1 answer


To hide the tooltip title you need to return an empty function in the tooltip title callback like ...



options: {
   tooltips: {
      callbacks: {
         title: function() {}
      }
   },
   ...
}

      

+7


source







All Articles