Highcharts - How to programmatically toggle legend items and determine which items are selected

Question

So I have a couple of requests from our designers:

1) Allow users to select/deselect all legend items via clicking a link outside the chart container. This means I need to programmatically toggle all items in the chart on or off, regardless if any are currently selected/deselected.

2) Determine which particular legend items are selected (or enabled) in the chart so that we can generate another chart from the selections.

I don't see a way to do either using the API so I was wondering if anyone has come up with a possible solution for either (or both).

Thanks in advance for any guidance.

Answer 1

If you have a lot of series, hide() and show() can result in very bad performance. Alternatively you can use setVisible() on each series and redraw() at the end.

    $('#uncheckAll').click(function(){
        var chart = $('#container').highcharts();
        var series = chart.series;
        for(i=0; i < chart.series.length; i++) {
            series[i].setVisible(false, false);
        }
        chart.redraw();
    });

    $('#checkAll').click(function(){
        var chart = $('#container').highcharts();
        var series = chart.series;
        for(i=0; i < chart.series.length; i++) {
            series[i].setVisible(true, true);
        }
        chart.redraw();
    });

to determine if a series is selected you can use the series.visible property