Toggle slices of multiple nested Pie Series with a single legend

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

This demo shows how we can use events on legend items to toggle slices of multiple nested Series on a Pie Chart.

Code

The code below catches click events on legend's containers, extracts category of a licked slice, iterates through data items of a different series, to toggle on or off a data item with the same category.

legend.itemContainers.template.on("disabled", function(disabled, target) {
  const category = target.dataItem.dataContext.get("category");
  am5.array.eachContinue(series1.dataItems, function(item) {
    if (item.get("category") == category) {
      if (disabled) item.hide();
      else item.show();
      return false;
    }
    return true;
  });
});

legend.itemContainers.template.on("disabled", function(disabled, target) {
  var category = target.dataItem.dataContext.get("category");
  am5.array.eachContinue(series1.dataItems, function(item) {
    if (item.get("category") == category) {
      if (disabled) item.hide();
      else item.show();
      return false;
    }
    return true;
  });
});

Example

See the Pen
Toggle slices of multiple nested Pie Series with a single legend by amCharts team (@amcharts)
on CodePen.0