Toggling series via API

Need to toggle series on and off via code? This short tutorial will show how.

Hiding or showing

Series in amCharts is a Sprite object. And just like any Sprite object, it can be toggled off by calling its hide() method, and shown back on by show().

That is it. You just call the respective method and the chart will take care of the rest.

series.hide();

series.hide();

Toggling

Do you need to toggle series: turn on if it's hidden, and turn off if it is currently visible?

Use isHidden and isHiding properties to check, and use appropriate method - hide() or show():

if (series.isHiding || series.isHidden) {
  series.show();
}
else {
  series.hide();
}

if (series.isHiding || series.isHidden) {
  series.show();
}
else {
  series.hide();
}

Here's a toggling example:

See the Pen amCharts 4: toggling series via API by amCharts team (@amcharts) on CodePen.

Looking up series object

To hide/show series, we need to have a reference to its object. Besides storing them in variables when we create them, there are a few ways to look them up.

By index

We can find series by index directly from chart.series list:

let series = chart.series.getIndex(0);

var series = chart.series.getIndex(0);

By id

Whenever we set an id attribute of an object, it ends up in chart's map dictionary. We can the use its getKey(id) method to look it up:

series.id = "s1";
// ...
chart.map.getKey("s1");

series.id = "s1";
// ...
chart.map.getKey("s1");