Filtering legend of a Highcharts by only visible series

charts, highcharts

Solution

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

Problem

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?

Original source