[Chartjs]-How to access specific data values from tooltip – Chart.js

by

5👍

✅

The Chart.js Tooltip docs have a section on Label Callback which shows how you can specify the text that displays for a given data point. You need to write a function that is supplied with the following parameters:

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      return '...';
    }
  }
}

The section for Tooltip Item Interface shows you what information is passed to the callback via tooltipItem. The important ones here are datasetIndex (index of the dataset the item comes from) and index (index of this data item in the dataset). Using these you can access the correct item within data.

Putting that together here is a very simple example accessing y and value in the tooltip

Fiddle (with backgroundColor/borderColor removed as it’s causing an error):

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      var item = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
      return item.y  + ' ' + item.value;
    }
  }
}

Leave a comment