We are using Highcharts and have some complex charts with roughly 75 series within on chart. The series are not used through the whole chart but only for range of three month. So we have about 15 series per year and the overall chart covers five years (makes roughly 15*5 = 75 series). However Highcharts displays all 75 charts within its legend. The goal is to minimize the legend to the visible series only. We are able to determine the related series in JS code and we tried to toggle the 'showInLegend' flags of the related series e.g.
chart.series[24].options.showInLegend = false
but without effect. We tried to redraw the chart using
chart.redraw()
but that has no effect...the legend remains unchanged.
So the questions are:
Well just setting the showInLegend
doesn't do the trick, there are some more hooks that need to be taken care of
Refer Halvor Strand's answer for a more recent way
item.options.showInLegend = true;
chart.legend.renderItem(item);
chart.legend.render();
item.options.showInLegend = false;
item.legendItem = null;
chart.legend.destroyItem(item);
chart.legend.render();
where, item can be a point or series
var item = chart.series[1];
Add Remove Legend Dynamically | Highchart & Highstock @ jsFiddle
You can set showInLegend
as false
when you create the chart.
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
showInLegend: false
}
demo1
If you want to update it dynamically you can do the following.
options.series[1].showInLegend = false;
chart = new Highcharts.Chart(options);
You forgot to force chart to redraw.
demo
Or chart.legend.allItems[1].destroy();
to remove the first one.
This can now be solved without any hacks through the Series.update
method (API). For example:
chart.series[0].update({ showInLegend: false });
See this JSFiddle demonstration. The method signature is:
update(Object options, [Boolean redraw])
Where options
are options for any regular Series
object. You can optionally halt redrawing to change multiple options before redrawing.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With