[Chartjs]-How to to change mouse cursor on chart.js doughnut graph?

by

3👍

✅

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

22👍

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

1👍

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

Leave a comment