How to to change mouse cursor on chart.js doughnut graph?

Question

When using the Chart.js library, I want to change cursor when hovering the mouse over the doughnut.

I do this :

$("#dc_LoadTime").mouseleave(function(){
    $("#dc_LoadTime").css("cursor", "default");
}); 
$("#dc_LoadTime").mouseenter(function(){
    $("#dc_LoadTime").css("cursor", "pointer");
});

With this in html page

<canvas id="dc_LoadTime"></canvas>

But this change cursor when mouse enter or leave canvas not on doughnut chart. I cannot find a way to do this. Does anybody know if this is possible?

Answer 1

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");
    }
  }
}