CODEWITHSUNDEEP
javascriptchartschart.js
noobyy
noobyy

Reputation: 143

Chart.js change hover text

When I hover over the data point, that is in march and has a value of 15, it says january 15 instead of march 15, but it's at the correct location. Is there anyway to fix this?

enter image description here

<!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: {
    legend: {display: false},
    scales: {
      xAxes: [{ type: 'category', labels: ['January', 'February', 'March', 'April', 'May', 'June'] }],
      yAxes: [{ticks: {min: 6, max:16}}],
    }
  }
});
</script>

</body>
</html>

Upvotes: 2

Views: 2922

Answers (2)

LeeLenalee
LeeLenalee

Reputation: 31351

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>

Upvotes: 1

emptyhua
emptyhua

Reputation: 6692

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>

Upvotes: 0

Related Questions