Hide Legend Marker On Mouseout For Highmaps

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 .

2015-05-08_170841As 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.

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.