One pulled slice per Pie chart

Normally, when you click/tap a slice on a Pie chart, it would pull out a little. You can have multiple slices pulled out that way. This tutorial will show how you can set up Pie chart in order to allow only one slice to be pulled at any given time.

Task

We want the slice to pull out when clicked/tapped. This part is already covered.

We also want currently pulled out slice to pull back into place when some other slice is pulled out. This we'll need to implement.

Solution

We are going to use slice template's "hit" event to set up a custom function, which checks for any currently pulled out slices and makes them go back.

SIDE READING If you're not familiar how events work in amCharts 4, we suggest you take a look at "Event Listeners" article. If you're not sure what templates are, "List Templates" article will help.

OK, so whenever a slice is pulled out, it becomes "active", causing its property isActive to be set to true. Vice versa, setting this property to false will make the slice pop back into its place.

Also, when a slice (or any other object for that matter) is clicked/tapped, it generates a "hit" event. If there's an event handler defined, it is executed.

Let's use these two bits of code to implement our task:

pieSeries.slices.template.events.on("hit", function(ev) {
  let series = ev.target.dataItem.component;
  series.slices.each(function(item) {
    if (item.isActive && item != ev.target) {
      item.isActive = false;
    }
  })
});
pieSeries.slices.template.events.on("hit", function(ev) {
  var series = ev.target.dataItem.component;
  series.slices.each(function(item) {
    if (item.isActive && item != ev.target) {
      item.isActive = false;
    }
  })
});
{
  // ...
  "series": [{
    // ...
    "slices": {
      "events": {
        "hit": function(ev) {
          var series = ev.target.dataItem.component;
          series.slices.each(function(item) {
            if (item.isActive && item != ev.target) {
              item.isActive = false;
            }
          })
        }
      }
    }
  }]
}

And here's the complete working example.

See the Pen amCharts 4: restricting only one pulled out slice by amCharts (@amcharts) on CodePen.24419