score:14

Accepted answer

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;
        }
    });

score:-1

so far only working solution in the world:

for (i = 0; i < chart.series.length; i++)
          chart.series[i].options.showinlegend = true;
          chart.series[0].setdata(chart.series[0].data);  

rendering manually doesn't work (hiding legend.box etc, always if there are multiple pages in legend, then browser button stays). setdata calls internal renderer which acts quite good and does all what is needed.
hmm, maybe in the end you can do this:
chart.setsize( chartwidth, chartheight+chart.legend.fullheight, false );

score:0

update a code little bit of selected answer. now it will increase the space when show/hide legend.

$('#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;
    }

    var series = chart.series[0];
        $(chart.series).each(function(){
            this.setvisible(true, false);
        });
        chart.redraw();

});

score:5

a fairly simple way to make this is to loop over the series and update them to not show in legend. this allows you to animate in and out of showing the legend and utilize the entire container space, as the methods are built in.

for example, toggling legend items would look like this:

$('#togglebutton').click(function() {
    for(i in chart.series)
        chart.series[i].update({ showinlegend: chart.series[i].options.showinlegend == null ? false : !chart.series[i].options.showinlegend }, false);
    chart.redraw();
});

see this jsfiddle demonstration for toggle, show and hide using buttons.

score:8

as simple as

mychartobject.legend.update({
   enabled:true
)};

score:14

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/


Related Query

More Query from same tag