Add mouseout event handler to legends in Chart.js

Question

In the event of onHover of legends, I would like to change the style of the mouse cursor to pointer (yes, this can be done as the code shown below). But in the event of mouse out of legends, I would like to change the mouse cursor back to default. Is it possible in Chart.js? Thanks.

Note: in the Chart.js documentation it provides onHover callback, but no mouseout.

HTML:

<canvas id="canvas1" height="150"></canvas>

JavaScript:

var ctx = document.getElementById("canvas1").getContext("2d");

var mychart = new Chart(ctx, {
  type: 'doughnut',
  data: {
  labels: ['uno', 'dos', 'tres', 'cuatro'],
  datasets: [{
    data: [1, 2, 3, 4],
    backgroundColor: ["#BDC3C7","#9B59B6","#E74C3C","#26B99A"]
  }]
  },
  options: {
  legend: {
        position: 'bottom',
        onHover: function(c) {
          console.log(c);
          $("#canvas1").css("cursor", "pointer");          
        }
   },
  }
});

Here is the link to the example in jsfiddle .

Answer 1

Add this

hover: {
    onHover: function(e) {
    $("#canvas1").css("cursor", "auto");
  }

to options:

---

Like this:

var ctx = document.getElementById("canvas1").getContext("2d");

var mychart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['uno', 'dos', 'tres', 'cuatro'],
    datasets: [{
      data: [1, 2, 3, 4],
      backgroundColor: ["#BDC3C7","#9B59B6","#E74C3C","#26B99A"]
    }]
  },
  options: {
    hover: {
        onHover: function(e) {
        $("#canvas1").css("cursor", "auto");
      }
    },
    legend: {
                position: 'bottom',
                onHover: function(c) {
                    console.log(c);
                    $("#canvas1").css("cursor", "pointer");                 
                }
     }
  }
});

https://jsfiddle.net/v77twcww/