PROBLEM
Hopefully this post will be the only time I need to share something I found with Highmaps/Highcharts… So what I was tasked to do was to remove this legend marker thing whenever the mouse was not over a US state or territory.
There’s a good demo of the issue here: http://www.highcharts.com/maps/demo/color-axis .
As you can demo as well, when I mouse out, the gray arrow at the top of the legend still appears. This behavior may seem confusing to users so I was asked to remove it on mouse out.
SOLUTION
Ugh, after hours and hours of searching through Highcharts/Highmaps code, playing around with the different settings, I got no where. I started googling the dumbest things “highcharts legend mouse”, “highmaps legend cross crosshairs”, “how to jump out the window of an eleven story building”… I even tried to do it in JQuery which wasn’t working.
I then stumbled upon further customization on mouse actions. It turns out, in the options, series, events, you can add mouse options.
I got a simple JS alert to popup on mouse out. So when the user was not on a state, the alert would pop up. It was a start.
I then used JQuery to handle the rest… (It actually worked!)
series: [{
...
events: {
mouseOut: function () {
// when the mouse isn't over any of the states, hide the highcharts path
$(".highcharts-legend-item > path").attr("visibility", "hidden");
}
}
}]
That successfully removes the arrow from the legend when the mouse is out.
I hope someone else can use this since you’d think this kind of option would be available easier than this way.