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