[Chartjs]-Chart.js change hover text

by

1👍

✅

You can use a custom label callback for this to get the correct data for the tooltip:

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<body>
  <canvas id="myChart" style="width:100%;max-width:700px"></canvas>

  <script>
    var xyValues = [{
        x: "March",
        y: 15
      },

    ];

    new Chart("myChart", {
      type: "scatter",
      data: {
        datasets: [{
          pointRadius: 4,
          pointBackgroundColor: "rgb(0,0,255)",
          data: xyValues
        }]
      },
      options: {
        tooltips: {
          callbacks: {
            label: (ttItem, data) => (`(${data.datasets[ttItem.datasetIndex].data[ttItem.index].x}, ${data.datasets[ttItem.datasetIndex].data[ttItem.index].y})`)
          }
        },
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            type: 'category',
            labels: ['January', 'February', 'March', 'April', 'May', 'June']
          }],
          yAxes: [{
            ticks: {
              min: 6,
              max: 16
            }
          }],
        }
      }
    });
  </script>

</body>

</html>

EDIT:

You can also choose to update to the latest major version of chart.js (Version 3), there this behaviour seems to be fixed by default.

There are some major breaking changes in V3 like how scales are defined, now all scales are their own object for example with the scale id being the object key. For all changes you can read the migration guide

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>

<body>
  <canvas id="myChart" style="width:100%;max-width:700px"></canvas>

  <script>
    var xyValues = [{
        x: "March",
        y: 15
      },

    ];

    new Chart("myChart", {
      type: "scatter",
      data: {
        datasets: [{
          pointRadius: 4,
          pointBackgroundColor: "rgb(0,0,255)",
          data: xyValues
        }]
      },
      options: {
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          x: {
            type: 'category',
            labels: ['January', 'February', 'March', 'April', 'May', 'June']
          },
          y: {
            min: 6,
            max: 16
          },
        }
      }
    });
  </script>

</body>

</html>

0👍

Just give january and february a null value.

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

<script>
var xyValues = [
  null, null,
  {x:"March", y:15},
];

new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgb(0,0,255)",
      data: xyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      xAxes: [{ type: 'category', labels: ['January', 'February', 'March', 'April', 'May', 'June'] }],
      yAxes: [{ticks: {min: 6, max:16}}],
    }
  }
});
</script>

</body>
</html>

Leave a comment