Cursor pointer change onhover not working in chartjsv3

Question

I am trying to change the cursor to pointer when we hover on the bar chart created using chartjs(v3) library. But I'm not able to do it with the following code:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div style="width:600px">
<canvas id="myChart"></canvas>
</div>
<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    plugins: [ChartDataLabels],
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      },
      hover: {
        onHover: function(e) {
          //$("#canvas1").css("cursor", e[0] ? "pointer" : "default");
            var el = document.getElementById("myChart");
            el.style.cursor = e[0] ? "pointer" : "default";
        }
      },
      legend: {
        display: false,
        onHover: function (e) {
          e.target.style.cursor = 'pointer'
        },
        onLeave: function (e) {
          e.target.style.cursor = 'default'
        }
      },
    }
  });
</script>

How can I fix this issue?

Answer 1

Few things wrong, the onHover does not belong in the hover sub options part, dont even think there is a hover sub options part. Also the event is not an array but an object, you want to have the second parameter which contains all the active elements.

Also the legend needs to be configured in the plugins section. Also doesnt make sense to disable the legend and use the onHover and onLeave callbacks

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div style="width:600px">
  <canvas id="myChart"></canvas>
</div>
<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    plugins: [ChartDataLabels],
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      },
      onHover: function(e, activeEls) {
        //$("#canvas1").css("cursor", e[0] ? "pointer" : "default");
        var el = document.getElementById("myChart");
        el.style.cursor = activeEls[0] ? "pointer" : "default";
      },
      plugins: {legend: {
        display: false,
        onHover: function(e) {
          e.target.style.cursor = 'pointer'
        },
        onLeave: function(e) {
          e.target.style.cursor = 'default'
        }
      },}
    }
  });
</script>