How to apply "cursor: pointer" css

[blubberbo]

Is there an easy way too apply the CSS - "cursor:pointer" so that whenever the mouse is over a graph or a legend or anything clickable it is a pointer instead of the default?

It seems more logical that way to me, since the legend may not be clearly clickable to everyone.

Thanks

[etimberg]

@blubberbo this could be done. I'm not sure if having it live in the core is the best or if it should be a plugin

[etimberg]

Once I think #2292 is done, plugins will get notified about mouse events. You could use this to know when to look over the position and see if anything is under the mouse. Then, if anything is under the mouse position, you could rewrite the cursor style

[etimberg]

See https://jsfiddle.net/rsz3g4ok/1/ using the work done in #3718 which changes the cursor style when over the clickable areas of the legend.

[blubberbo]

thank you!

[toru-sean]

Note: since v2.5.0 the onHover event now returns two arguments. This means that @etimberg's solution needs a slight modification.

If you change lines 14 & 15 from this...

onHover: function(e) {
        $("#canvas1").css("cursor", e[0] ? "pointer" : "default");

to this...

onHover: function(e,a) {
        $("#canvas1").css("cursor", a[0] ? "pointer" : "default");

it will work with newer ChartJS versions