Chartjs-Chart JS tooltip label not showing correct value

by

0👍

This is because you are using V2 of Chart.js while using V3 syntax for the tooltip. This wont work. The options for the tooltip in V2 are placed in a different location:

const options = {
  type: 'scatter',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{
          x: 0.2505597250394178,
          y: 12
        },
        {
          x: 0.1629651642029184,
          y: 19
        },
        {
          x: 0.6825862858121792,
          y: 3
        },
        {
          x: 0.39821027356939087,
          y: 5
        },
        {
          x: 0.1088502186196103,
          y: 2
        },
        {
          x: 0.7836566822098099,
          y: 3
        }
      ],
      backgroundColor: 'orange'
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        label: (ttItem) => (ttItem.value)
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

const 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/2.9.4/Chart.js"></script>
</body>

Leave a comment