Toggle slices of multiple nested Pie Series with a single legend

Pie#events#legend#pie

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.

TypeScript

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;
  });
});

JavaScript

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

ResultJSHTMLCSSJSON

Open in:New tabChart MakerCodePenjsFiddle

Run

Toggle slices of multiple nested Pie Series with a single legendtoggle-slices-of-multiple-nested-pie-series-with-a-single-le