How can I change the cursor on pie chart segment hover in ChartJS 3?

December 1, 2021

In a situation similar to Changing cursor to pointer on Chart.js bar chart when hover (mousemove) event is disabled? I’m trying to change cursor on hover. However, in my case it’s on a pie chart segment and not a label. We’re navigating to related pages on click of each segment.

For version 2 we did this:

options: {
  hover: {
    onHover: function(ev, el) {
      ev.target.style.cursor = el[0] ? 'pointer' : 'default';
    }
  }
}

This no longer works with v3, though. The native element doesn’t seem available. I’ve spelunked through the data available on the event and can’t find the actual element.

Here’s my latest attempt:

options: {
  onHover: function(e) {
    e.native.target.style.cursor = 'pointer';
  }
}

I’ve also tried via activeEls:

options: {
  onHover: function(e, activeEls) {
    if (activeEls.length) {
      activeEls[0].style.cursor = 'pointer';
    }
  }
}

The data there looks like this:

How can I access the segment element to apply styling?

>Solution :

You can get the chart instance from the event which has the canvas on which you can target the mouse like so:

const options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    }]
  },
  options: {
    onHover: (evt, activeEls) => {
      activeEls.length > 0 ? evt.chart.canvas.style.cursor = 'pointer' : evt.chart.canvas.style.cursor = 'default';
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.1/chart.js"></script>
</body>