Highcharts: Hide and show legend

Question

I'd like to be able to toggle the visibility of the legend of a chart when the user clicks a button.

I've tried hiding the legend using the undocumented destroy() method, however when I try to re-render the legend and it's items, the items appear in the top left of the chart instead of within the legend. The items also don't seem to have any of their event handlers attached (clicking on an item no longer toggles a series).

Is there a better way to do this? I have to support both SVG and VML implementations, so am looking for a solution that would address both.

JSFiddle Example

$('#updateLegend').on('click', function (e) {
    var enable = !chart.options.legend.enabled;
    chart.options.legend.enabled = enable;

    if (!enable) {
        chart.legend.destroy(); //"hide" legend
    } else {
        var allItems = chart.legend.allItems;

        //add legend items back to chart
        for (var i = 0; i < allItems.length; i++) {
            var item = allItems[i];
            item.legendItem.add();
            item.legendLine.add();
            item.legendSymbol.add();
        }

        //re-render the legend
        chart.legend.render();
    }
});

Answer 1

In case when you destroy legend, then you need to generate full legend. Simpler solution is use hide() / show() function for elements.

http://jsfiddle.net/sbochan/3Bh7b/1/

$('#updateLegend').click(function (e) {
        var legend = chart.legend; 

        if(legend.display) {
            legend.group.hide();
            legend.box.hide();
            legend.display = false;
        } else {

            legend.group.show();
            legend.box.show();
            legend.display = true;
        }
    });

Answer 2

Here is an interesting solution I came up with - works for Highcharts3 and Highstocks1.3 https://bitbucket.org/jkowalleck/highcharts-legendextension

All you have to do is to add the HighchartsExtension I wrote to your HTML page, and you get 3 new functions added to the Chart:
myChart.legendHide() ,
myChart.legendShow() and
myChart.legendToggle()

See the examples:
in Highcharts with floating legend: http://jsfiddle.net/P2g6H/
in Highstocks with static legend: http://jsfiddle.net/ps6Pd/