score:14
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/
Source: stackoverflow.com
Related Query
- Change the legend in highcharts heatmap to show instead of a color bar, a set of fixed icons with hide and show on click
- Highcharts: Hide and show legend
- How can I hide and show a category in highcharts
- Show tootip and select pie slice on legend click of pie chart in HighCharts
- Highcharts show max., min., and average for each serie in legend
- plotBands Hide and Show parameters do not work in Highcharts
- Highcharts - Xaxis should show only days and month, hide milliseconds
- Highcharts - show markers on zoom event (selection) and hide on reset zoom. Is it possible?
- HighCharts Hide Series Name from the Legend
- Hide axis and gridlines Highcharts
- Highcharts - How to programmatically toggle legend items and determine which items are selected
- Highcharts - How to hide series name and Y value in tooltip
- Highcharts : Venn Diagram how to show total and union numbers?
- Is it possible to hide the line & symbol next to Highcharts legend items?
- How to Check and Uncheck all the Legend elements in HighCharts Linechart?
- Highcharts - Hide child labels in a multiple levels and multiple layouts treemap
- Highcharts connecting scatter chart and pie chart with single legend
- How can i force Highcharts to use same symbols in Legend and Series?
- Legend and Axis titles not showing in Highcharts Graph
- Legend and Axis titles not showing in Highcharts Graph
- Highcharts - Global configuration with common code and unique data & Headings
- Show only first and last xAxis label in Highcharts
- How do I hide a Highcharts series from the chart, but always show it in the tooltip?
- Highcharts hide series without change legend color
- Show / Hide plotband in Highcharts - Javascript
- Highcharts: show series on legend but hide on chart
- Highcharts - Hide series "points" (labels) on both x- and y-axis
- How to center highcharts pie chart and legend on a page?
- Showing HighCharts series name on x-axis and in legend
- Highcharts show the same yAxis start and end value with multiple data series
More Query from same tag
- Highcharts Time Series data from C# in a format required by HighCharts
- Add borderColor for map Highcharter R
- bar pointPlacement works bad in get one data
- highchart/highstock tooltip does not adjust after zoom
- How to force the navigator to show a full year timeline even if the data collectively within it doesn't span an entire year
- Old state is being shown despite updating in React Highcharts click event
- Highcharts addSeries not showing line
- scatter plot filter legend on zoom
- Highcharts: X-axis, plot points and horizontal scrolling
- jQuery - HighCharts Labels outside Series (Bar Chart)
- Disabling a slice for a Highcharts pie chart when creating the chart
- Highcharts : Under Y Axis we need to display a Image
- Highcharts sort series data and redraw
- Sync max min between many highcharts charts (in real time)
- Propagate click from tooltip to point
- Highcharts isn't displaying the data
- Is there some way to only show the PNG option in exporting.csv?
- Highcharts xrange refuses to exhibit drilldown behavior
- Highcharts - how to dynamically disable plotBorder without recreating a chart
- Transform array of objects into a transposed array of objects
- Highcharts Heatmap Set Column Width
- HighMap displaying issue with customized json file
- document ready call sql function
- Generating highcharts issues in dual axis column chart
- Highcharts unable to handle large amount of data?
- CSS Style not getting applied to a series in Highchart
- Snap to month in highchart stock navigator
- Use Material UI theme attributes for styling highcharts - React
- Changing tootip data on pie chart in highcharts
- Highcharts dynamicly update legend with grouped values