如何更改chart.js甜甜圈图上的鼠标光标？

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

Answer 2

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

Answer 3

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';
   },
 };`