In Highcharts can legends be shown as dropdown or option of select all deselect all legends?

Question

I am using Highchart and in few case large data is populate with around 100 Legends displayed at the bottom. My requirement is I should have One more option of select all or deselect all. Is this feasible in Highchart?

Answer 1

1. You can use the linkedTo feature and anchor each series to the dummy one which will be responsible for toggle visibility in legend.

Demo: https://jsfiddle.net/BlackLabel/khce1uwp/

  series: [{
      id: 'main',
      name: "main legend",
      data: []
    },
    {
      name: 'Installation',
      data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
      linkedTo: 'main'
    }, ...
  ],

API: https://api.highcharts.com/highcharts/series.line.linkedTo

2. You can create a custom button which will toggle visibility of your series.

Demo: https://jsfiddle.net/BlackLabel/4zLequ8v/

let btn = document.getElementById("btn"),
  seriesVisible = true;

btn.addEventListener('click', function() {
  if (seriesVisible) {
    chart.series.forEach(s => s.hide());
    seriesVisible = false
  } else {
    chart.series.forEach(s => s.show());
    seriesVisible = true
  }
})