[Chartjs]-Chartjs not giving 'xLabel' properly on tooltip

by

1👍

✅

For V2 this behaviour wont get fixed anymore. But you can get the correct labels by using the second argument in the callback which provides you with the data:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [{
        x: "Red",
        y: 5
      }, {
        x: "Blue",
        y: 5
      }, {
        x: "Purple",
        y: 5
      }, {
        x: "Orange",
        y: 5
      }],
      pointBackgroundColor: 'pink',
      borderColor: 'pink',
      fill: false
    }]
  },
  options: {
    tooltips: {
      mode: 'point',
      callbacks: {
        title: (ctx, data) => (data.datasets[ctx[0].datasetIndex].data[ctx[0].index].x)
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Leave a comment