One pulled slice per pie series

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 "click" event to set up a custom function, which checks for any currently pulled out slices and makes them go back.

NOTEFor more information on how events work in amCharts 5, read "Events" tutorial. Also make sure to read about the concept of "List templates".

OK, so whenever a slice is pulled out, it becomes "active" (it's "active" setting is set to true). And vice versa, setting it 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 "click" event. If there's an event handler defined, it is executed.

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

series.slices.template.events.on("click", function(ev) {
  series.slices.each(function(slice) {
    if (slice != ev.target && slice.get("active")) {
      slice.set("active", false);
    }
  })
});

series.slices.template.events.on("click", function(ev) {
  series.slices.each(function(slice) {
    if (slice != ev.target && slice.get("active")) {
      slice.set("active", false);
    }
  })
});

And here's the complete working example.

See the Pen
amCharts 5: One pulled slice per series by amCharts team (@amcharts)
on CodePen.0