[Chartjs]-Remove the label and show only value in tooltips of a bar chart

by

10👍

✅

just use the title option with an empty value. Like this: 

callbacks: {
        title: function(tooltipItems, data) {
          return '';
        },
        label: function(tooltipItem, data) {
          var datasetLabel = '';
          var label = data.labels[tooltipItem.index];
          return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        }
      }

see updated jsfiddle

1👍

this is how to get it done

tooltip: {
    enabled: true,
    displayColors:false,
    callbacks: {
        label:(tooltipItem)=>{
            return tooltipItem.parsed;
        },
    }
},

1👍

This should work for the newest version of ChartJS 3.8.0:

 tooltip: {
        callbacks: {
          title: function (tooltipItem) {
            return '';
          },
          label: function (tooltipItem) {
            var tooltipText = '';
            if (tooltipItem.dataset.data[tooltipItem.dataIndex] != null)
              tooltipText = tooltipItem.dataset.data[tooltipItem.dataIndex]!.toString();
            return tooltipText;
          }
        }
      }

0👍

As an alternative to pumpkinzzz‘s answer, if you want to display ONLY the label name, this is the approach you would follow. Leave the title empty, and return your string to the label property. This is because the Tooltip’s label color is defined under that property.

Although this may look unnecessary, if your labels include chart data (all under one string), then by default the tooltip displays the data twice. If you’re looking to avoid this, then the code below may help.

title: function(tooltipItems, data) {
  return '';
},
label: function(tooltipItem, data) {
  return data.labels[tooltipItem.index].toString(); //Some IDEs throw an error if you don't cast to a string
}

-1👍

For latest Version Of Chart.js (3.6.0)

plugins: {
    tooltip: {
        yAlign: 'top',
        callbacks: {
            label: function(tooltipItem) {                                
                return tooltipItem.dataset.data;
            }
        }
    },
}

Leave a comment