Highcharts: Additional legend items to control multiple items

Question

I've got a Highcharts bubble chart that displays data for a couple dozen U.S. states. As you'd expect, each state's name appears as a legend item. When the user puts the mouse over a state name, that state's bubble is highlighted in the chart (all other bubbles become partially opaque). Clicking on a state name in the legend toggles that state's bubble on/off. That's all fine and I'd like to keep all that functionality.

What I want to add is a few legend items that would control a set of multiple state bubbles that I could define. For example, a "New England" legend item. Mouseover it and all the New England states (Maine, Vermont, Rhode Island, etc.) would get the highlight effect. Clicking on "New England" would toggle all of the states in that group on/off.

Anyone have any idea of how this could be done?

Thanks for your attention,

It would be helpful if you posted your code, or even better, a jsfiddle showing what you have done so far. Is each state a separate series at the moment ? — SteveP
Each state is a separate series. I will try making a jsfiddle. (never done that before) — user3692703

SteveP SteveP · Accepted Answer · 2014-10-23T08:11:28

One solution would be to add some extra buttons which allow the toggling of several series at once using the API calls 'series.show' and 'series.hide' to hide or show several series at once. The downside with this approach is that you won't get the hover functionality you get when hovering on the legend, and the buttons would be separate from the existing legend.

Another options is to plot groups of series which mirror your existing data e.g.

{"name":"TEST GROUP","data":[{x:3.5,y:-0.8,z:50600,color:"#AD5C33"},{x:4.1,y:-   0.8,z:122100,color:"#9966FF"},{x:5.8,y:-1.8,z:40700,color:"#33AD5C"}]},
{"name":"Utah","data":[[3.5,-0.8,50600]],"color":"#AD5C33","visible":true,"_symbolIndex":3},
{"name":"Minnesota","data":[[4.1,-0.8,122100]],"color":"#9966FF","visible":true,"_symbolIndex":2},   
{"name":"Maine","data":[[5.8,-0.8,40700]],"color":"#33AD5C","visible":true,"_symbolIndex":1},

In this example, TEST GROUP has the same data as Utah, Minnesota and Maine, but appears in the legend as a separate item http://jsfiddle.net/j0sy8u80/.

This approach isn't ideal either, as toggling 'TEST GROUP' doesn't hide the other series as well. You may be able to sort to sort this out by handling the series.events.hide and series.events.show events. When a grouped series is hidden, you could manually hide the associated state series using the API call chart.series.hide.

Hopefully I've given you some ideas which will help.

Highcharts: Additional legend items to control multiple items

1 Answers