score:2

For versions > 3.x you find the target under native

options: {
  plugins : {
    legend: {   
      labels: {
        onHover: function (e) {
          e.native.target.style.cursor = 'pointer';
        },
        onLeave: function (e) {
          e.native.target.style.cursor = 'default';
        }
      }
    }
  }
}

score:5

Based on @Luca Fagioli answer, in my case, I didn't want to disable the click events in my chart so i added:

events: ['mousemove', 'click'],
onHover: (event, chartElement) => {
  event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}

now that you have a cursor on the chart you want the cursor in the legend too - if they are clickable - so in the legend settings toy hold add:

 onHover: (event) => {
    event.target.style.cursor = 'pointer';
 }

score:12

Not sure if it applies to your case, but with Chart.js 2.x I use this approach, which does not use the options.hover property. Just add this in the options:

onHover: (event, chartElement) => {
    event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}

Hope it helps.


Related Query

More Query from same tag