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.

TypeScript

series.hide();

JavaScript

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():

TypeScript

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

JavaScript

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

Here’s a toggling example:

Open in 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:

TypeScript

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

JavaScript

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:

TypeScript

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

JavaScript

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