Toggle multiple pie slices via 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 a Legend to "inverse" toggle behavior of Pie chart's legend by showing only clicked sliced, while hiding the rest of the slices.

Code

let legend = chart.children.push(am5.Legend.new(root, {
  centerX: am5.percent(50),
  x: am5.percent(50),
  layout: root.horizontalLayout,
  clickTarget: "none"
}));

let currentlySelected;
legend.itemContainers.template.events.on("click", function(ev) {
  const targetDataItem = ev.target.dataItem.dataContext;
  const showAll = currentlySelected === targetDataItem ? true : false;
  currentlySelected = targetDataItem;
  const series = targetDataItem.component;
  am5.array.each(series.dataItems, function(seriesDataItem) {
    if (seriesDataItem === targetDataItem || showAll) {
      seriesDataItem.show();
    }
    else {
      seriesDataItem.hide();
    }
  });
  if (showAll) {
    currentlySelected = undefined;
  }
});

var legend = chart.children.push(am5.Legend.new(root, {
  centerX: am5.percent(50),
  x: am5.percent(50),
  layout: root.horizontalLayout,
  clickTarget: "none"
}));

var currentlySelected;
legend.itemContainers.template.events.on("click", function(ev) {
  var targetDataItem = ev.target.dataItem.dataContext;
  var showAll = currentlySelected === targetDataItem ? true : false;
  currentlySelected = targetDataItem;
  var series = targetDataItem.component;
  am5.array.each(series.dataItems, function(seriesDataItem) {
    if (seriesDataItem === targetDataItem || showAll) {
      seriesDataItem.show();
    }
    else {
      seriesDataItem.hide();
    }
  });
  if (showAll) {
    currentlySelected = undefined;
  }
});

Example

See the Pen Inverse-toggling Pie Chart slices via legend by amCharts team (@amcharts) on CodePen.