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?

Solution 1

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

Solution 2

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

Comments

[khalid khan]

How can we do this for chartjs version 2, on pie and bar charts.?

[Subtletree]

This variation worked for me: onHover: function(e, elements) { $(e.currentTarget).css("cursor", elements[0] ? "pointer" : "default"); }

[Sam Logan]

Here's a variation in vanilla JS incase it helps anyone: onHover: function(e, el) { const section = el[0]; const currentStyle = e.currentTarget.style; currentStyle.cursor = section ? 'pointer' : 'normal'; }

[Robert]

It works, but the CPU is high when hovering. It would be nice if CSS classes can be specified for those chart elements, since CSS hover effect is of low CPU consumption.

[Paul Keen]

For Chart.js need to update to: onHover: (event, chartElement) => { event.native.target.style.cursor = chartElement[0] ? 'pointer' : 'default'; }