highcharts link series such that turn one off turns off the other

Question

I would like to link a pair of series in highcharts so that clicking either one in the legend turns both in the pair on/off.

For example, in this fiddle, if I click 1A in the legend I would like it to also turn off 2A but leave 1B and 2B unaffected. Clicking 2A should also turn off 1A, i.e. the link should work both ways.

Is there a way to achieve this?

Answer 1

You can also use linkedTo options from Highcharts, see: http://jsfiddle.net/GCqsf/4/

There is only one limit - linked series isn't displayed in legend, so probably it may not fit the best your example. Since Highcharts 3.0.7 you can set series.showInLegend = true to display linked series in legend.

Answer 2

You'll have to handle the legendItemClick event and specifically hide (and show) the "sister" series.

I have a running example in this jsFiddle.

Note that I'm using the links variable as an easy way to get the "sister" series for a given series.

Also note that I've added an id to each series so that chart.get() returns the series when given its id.