[Chartjs]-Cursor pointer change onhover not working in chartjsv3

by

2👍

✅

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/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></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>

Leave a comment