How to access specific data values from tooltip - Chart.js

Question

I'm trying to pass array of objects as data to graph data, including the value for x and some other values to be used in each tooltip.

In my data array, each object contains values for x and value variables. I want to access this value inside tooltips and finally to display the value inside the tooltip that appears when mouse hover on each graph data.

Here is my code:

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['2017/06/12', '2017/06/23', '2017/07/12', '2017/07/23', '2017/08/12', '2017/08/23', '2017/09/12'],
    datasets: [{
      label: 'Values',
      data: [{
          y: 12,
          value: 12
        },
        {
          y: 3,
          value: 13
        },
        {
          y: 1,
          value: 15
        },
        {
          y: -3,
          value: 5
        },
        {
          y: 67,
          value: 18
        },
        {
          y: 12,
          value: 11
        },
        {
          y: 13,
          value: 19
        }
      ],
      fill: false,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 2
    }]
  },
  options: {
    tooltips: {
      // HERE I WANT TO ACCESS VALUE VARIABLE AND DISPLAY IT IN TOOLTIP
    },
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

sheilak · Accepted Answer · 2019-04-12 20:41:34Z

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;
    }
  }
}

answered Apr 12, 2019 at 20:41

sheilak

5,8737 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

yasmikash Over a year ago

thanks! that does what I want. However, tooltips appears only when single values for borderColor and backgroundColor is given, but that's a considerable problem.

sheilak Over a year ago

I don't know if that will work for a line chart. See issue with workaround here: github.com/chartjs/Chart.js/issues/2430

DukeSilver Over a year ago

Unfortunately, the data parameter is no longer available in ChartJS 4.x.x. As noted in the 3.x Migration Guide: "The callbacks no longer are given a data parameter. The tooltip item parameter contains the chart and dataset instead."

Collectives™ on Stack Overflow

How to access specific data values from tooltip - Chart.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related