[Chartjs]-How can I change the cursor on pie chart segment hover in ChartJS 3?

by

1👍

✅

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>

1👍

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

Leave a comment