score:3

Accepted answer

you can piggy back on the showtooltip method, like so

...
var mydoughnutchart = new chart(ctx).doughnut(data);

var originalshowtooltip = mydoughnutchart.showtooltip;
mydoughnutchart.showtooltip = function (activeelements) {
    $("#dc_loadtime").css("cursor", activeelements.length ? "pointer" : "default");
    originalshowtooltip.apply(this, arguments);
}

score:0

for me this worked

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

add this inside your options like

 options = {
  responsive: true,
  maintainaspectratio: false,
  cutoutpercentage: 75,
  aspectratio: 1.5,
  // show pointer while hovering
  onhover: (event, chartelement) => {
    event.target.style.cursor = chartelement[0] ? 'pointer' : 'default';
   },
 };`

score:21

in chartjs 2.0 < 2.5 i use hover in option section of the chart, like this:

options: {
  hover: {
    onhover: function(e) {
      $("#id-of-your-canvas").css("cursor", e[0] ? "pointer" : "default");
    }
  }
}

...and here is a complete example: https://jsfiddle.net/su5fgb5h/5/

in version 2.5 onhover callback has changed and we need second parameter to change cursor:

options: {
  hover: {
    onhover: function(e, el) {
      $("#id-of-your-canvas").css("cursor", el[0] ? "pointer" : "default");
    }
  }
}

Related Query

More Query from same tag