Toggling multiple series with a single legend item

This tutorial will show how you can toggle several Series at once, with a single Legend item.

Base chart

Let’s start with a basic chart with three Line series.

Open in CodePen

Each Series has its own entry in the Legend. Click any of those will toggle its corresponding Series on and off.

Suppose, we need to have just a single item in Legend. Clicking it would toggle all three of the series.

Hiding series from legend

This part’s pretty easy: if we don’t a series to appear in legend, we set its hiddenInLegend property to true.

Since we need to hide only the second and third item, we set hiddenInLegend for them, but not for the first series.

TypeScript

// ...series2.hiddenInLegend = true;// ...series3.hiddenInLegend = true;

JavaScript

// ...series2.hiddenInLegend = true;// ...series3.hiddenInLegend = true;

JSON

{  // ...  "series": [{    // ...  }, {    // ...    "hiddenInLegend": true  }, {    // ...    "hiddenInLegend": true  }]}

Open in CodePen

That took care of the two legend items. However clicking the remaining one just hides a single series.

Toggling multiple series

We need to set up a code that hides remaining two series when the first one is hidden, and vice versa: bring them back up when the first one is switch back on.

For that series events "hidden" and "shown" seems to be perfect.

TypeScript

series1.events.on("hidden", function() {  series2.hide();  series3.hide();});series1.events.on("shown", function() {  series2.show();  series3.show();});

JavaScript

series1.events.on("hidden", function() {  series2.hide();  series3.hide();});series1.events.on("shown", function() {  series2.show();  series3.show();});

JSON

{  // ...  "series": [{    // ...    "events": {      "hidden": function(ev) {        var chart = ev.target.baseSprite;        chart.series.getIndex(1).hide();        chart.series.getIndex(2).hide();       },      "shown": function(ev) {        var chart = ev.target.baseSprite;        chart.series.getIndex(1).show();        chart.series.getIndex(2).show();       }    }  }, {    // ...    "hiddenInLegend": true  }, {    // ...    "hiddenInLegend": true  }]}

That’s about it. Now, when you click our only legend item, all three of the series will toggle.

Open in CodePen

Separate toggle button

If, however, we would like to still have individual toggling control for each series, but also a button that toggles them all, we could do that by adding an additional series without any data, that would serve as this “global toggle” button.

Open in CodePen