ChartJS: call the property of an array object in the tooltip

by

👍:0

You can make use of the tooltip callbacks to achieve what you want, see example:

var options = {
  type: 'line',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{
        x: 'val1',
        y: 2,
        value: 20
      }, {
        x: 'val2',
        y: 2.5,
        value: 25
      }, {
        x: 'val3',
        y: 3,
        value: 35
      }],
      borderWidth: 1,
      borderColor: 'red',
      backgroundColor: 'red'
    }]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: (ttItem) => (`${ttItem.dataset.label}: ${ttItem.dataset.data[ttItem.dataIndex].value}`)
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
</body>

Leave a comment