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.

Alex Baban · Accepted Answer · 2018-05-04T06:16:20.063

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/

Suppose I have added some CSS onHover Event on a Div in my DOM and want to remove that CSS on remove hover. How that can be possible ? — Prits, May 28 '20 at 14:46

Add mouseout event handler to legends in Chart.js

1 Answers1