CODEWITHSUNDEEP
javascripthtmlcanvaschart.js
isherwood
isherwood

Reputation: 61115

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

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:

enter image description here

How can I access the segment element to apply styling?

Upvotes: 2

Views: 1656

Answers (2)

Raphaël VO
Raphaël VO

Reputation: 2640

For who is using ChartJS 4 and come across this question without success to to find the element like previous version. From version 3.x, you can access directly to chart object in onHover.

options.onClick and options.onHover now receive the chart instance as a 3rd argument

Migration Guide 3.x

To change the cursor to pointer, you can do like below:

onHover: (event: ChartEvent, chartElement: ActiveElement[], chart) => {
          chartElement.length > 0 ? chart.canvas.style.cursor = 'pointer' : chart.canvas.style.cursor = 'default';
},

it should do the trick

Upvotes: 1

LeeLenalee
LeeLenalee

Reputation: 31431

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>

Upvotes: 1

Related Questions