Filtering legend of a Highcharts by only visible series

9
votes

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:

  • is it possible to redraw the legend based on the updated showInLegend options?
  • is there mechanism in Highcharts to dynamically updated the legend based on the visible series?
3
chartshighcharts

3 Answers

16
votes

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

Old trick but still works

To Add

item.options.showInLegend = true;
chart.legend.renderItem(item);
chart.legend.render();

To Remove

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

6
votes

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.

6
votes

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.