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

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

• javascript
• chart.js

1 Answer 1

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