Filtering Highcharts Legends Only in Visible Rows

Question

We use Highcharts and have some complex diagrams with approximately 75 series per diagram. The series is not used throughout the chart, but only for a range of three months. Thus, we have about 15 episodes per year, and the general diagram covers five years (approximately 15 * 5 = 75 episodes). However, Highcharts displays all 75 diagrams in its legend. The goal is to minimize the legend only for the visible series. We can define related series in JS code, and we tried to toggle the 'showInLegend' flags of the corresponding series, for example.

chart.series[24].options.showInLegend = false 

but without effect. We tried to redraw the chart using

 chart.redraw() 

but it 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 a mechanism in Highcharts for dynamically updating a legend based on a visible series?

Answer 1

Well just setting showInLegend doesn't do the trick, there are a few more hooks you need to take care of

Refer to Halvor Strand for a later way

---

Old trick but still working

Add

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

Delete

 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 dynamic dynamics | Highchart and Highstock @jsFiddle

Answer 2

Now this can be solved without hacks through the Series.update ( API ) method. For example:

 chart.series[0].update({ showInLegend: false }); 

See this JSFiddle demo . Method Signature:

 update(Object options, [Boolean redraw]) 

Where options are parameters for any regular Series object. You can pause redrawing if necessary to change several options before redrawing.

Answer 3

You can set showInLegend to false when creating a 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 dynamically update it, you can do the following.

 options.series[1].showInLegend = false; chart = new Highcharts.Chart(options); 

You forgot to make the chart redraw.

demonstration

Or chart.legend.allItems[1].destroy(); to remove the first one.