3

polar-chart

Hi all,

Hopefully this is an easy one. I've set up a legend with an onclick event but would like the mouse cursor to change to "pointer" when I hover over the labels (see chart screenshot above). Currently it's hard to tell that the labels are links because the mouse cursor doesn't change when I hover over them.

Also how do I add some margin/padding between the legend and chart (space below the legend).

Many thanks!

4 Answers 4

4

You can achieve the desired behavior using a combination of the legend onHover config option (to change the pointer style to pointer) and the custom tooltips config option (to change the pointer style back to default).

Here is an example config demonstrating a working solution. I wasn't sure if you were using jQuery or not so I decided not to use it. Feel free to change accordingly.

options: {
  legend: {
    position: 'top',
    labels: {
      fontColor: 'rgb(255, 99, 132)'
    },
    onHover: function(event, legendItem) {
      document.getElementById("canvas").style.cursor = 'pointer';
    }
  },
  tooltips: {
    custom: function(tooltip) {
      if (!tooltip.opacity) {
        document.getElementById("canvas").style.cursor = 'default';
        return;
      }
    }
  }
}
5
  • Amazing! Works perfectly...do you also know how I can get a space (padding / margin) between the chart and legend?
    – HDhani
    Commented Mar 3, 2017 at 16:26
  • 1
    Unfortunately, there really isn't a way to add more space between the auto-generated legend and the chart. You can of course change the placement of the legend, however if you truly want to control here its located and how much space is between stuff then you should go with your own custom legend using the .generateLegend() prototype method. Search SO, there are plenty of questions demonstrating how this is done. Commented Mar 3, 2017 at 16:47
  • hmmm ok, maybe I'll come back to it another time. Thanks for your help!
    – HDhani
    Commented Mar 3, 2017 at 17:18
  • @HDhani It turns out it is possible with the default legend. Check out this answer that I posted earlier today. Commented Mar 4, 2017 at 6:08
  • wow that's a lot of code just to add some spacing... but works perfectly!! Genius :-)
    – HDhani
    Commented Mar 6, 2017 at 10:42
4

I found a different way to make this work. This lines up more literally in my mind. Perhaps the framework was updated in the interim since this was initially answered.

 // This event fires anytime you mouse over the chart canvas.
onHover: function (event) {
    event.target.style.cursor = 'default';
},
responsive: true,
maintainAspectRatio: false,
legend: {
    display: true,
    position: 'bottom',
    onHover: function (event, legendItem) {
        // There is only a legendItem when your mouse is positioned over one
        if (legendItem) {
            event.target.style.cursor = 'pointer';
        }
    }
}

In case anyone wants to know more, here are the docs for events and the legend.

1
  • 1
    "event.srcElement.style.cursor" is deprecated. use "event.target.style.cursor" instead ;)
    – Nader
    Commented Jun 25, 2020 at 5:14
1

Faster, without scanning the DOM every time, you find the target under native in the hover event

Tested in version 3.2.1 and 3.3.2 (latest on 2021 jun 22)

options: {
  plugins : {
    legend: {   
      labels: {
        onHover: function (e) {
          e.native.target.style.cursor = 'pointer';
        },
        onLeave: function (e) {
          e.native.target.style.cursor = 'default';
        }
      }
    }
  }
}
0

The accepted answer did not work for me because my tooltips are always visible (position: "nearest"). So I use a timeout to change and revert the cursor style:

onHover: function(event, legendItem) {
    document.getElementById("canvas").style.cursor = "pointer";
    clearTimeout(hoverTimeout); // global var
    hoverTimeout = setTimeout(function() {
        document.getElementById("canvas").style.cursor = "default";
    }, 100);
}

It's a dirty trick but it works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.