Creating Pie Series Animations

By default (if you are using "animated" theme), Pie series will fade in when chart initializes. Let's explore how we can fancy-up those animations.

Base chart

Let's take this chart as a base:

See the Pen amCharts 4: animating pie series by amCharts team (@amcharts) on CodePen.0

As you can see, it just fades in. Boooooring. Let's fix that.

The concepts

But, before we jump to unicorns and rainbows, let's talk about the concept of initial animations.

SIDE READING Concept of initial animations relies heavily on states. If you're not sure what "states" are, read our "States" article.

OK, here we go.

When the series is added to the chart it is hidden, and thus has "hidden" state applied.

When chart initializes, it applies "default" state to the series, thus negating "hidden" state.

Whenever this shift between states occurs, any mismatching property values will animate from current one to the ones defined in target state.

This is where the default fade in effect is coming from.

A "hidden" state sets opacity of the Series to zero, while "default" state resets it to one. If we didn't have "animated" theme enabled, it would just replace the 0 with 1 and series would pop into view.

But we do have "animated" theme, which means that any numeric values will slowly transition between current to target affecting appearance of the element. In this case its the opacity, causing the series to fade in gradually.

The thing is, we're not limited just to opacity, or to just one property. We're going to exploit that to create other effects, by manipulating initial values of the "hidden" state.

Let's go.

Defining effects

Fan-out

Now that we know concept of how initial animations work (by transitioning from "hidden" to "default" state), we can start finding Pie series properties to exploit.

Luckily for us, PieSeries in amCharts 4 can be not a perfect circle but start and end at any angle. The two properties responsible for that are startAngle (default -90) and endAngle (default 270).

As you can see default values form a full 360 degree circle.

If we want our Pie series to "fan out", all we need to do is to make endAngle animate from -90 to 270.

Let's do that.

pieSeries.hiddenState.properties.endAngle = -90;

pieSeries.hiddenState.properties.endAngle = -90;

{
  "series": [{
    // ...
    "hiddenState": {
      "properties": {
        "endAngle": -90
      }
    }
  }]
}

Try it out:

See the Pen amCharts 4: animating pie series by amCharts team (@amcharts) on CodePen.0

Zoom-in

We can make the Pie chart zoom in from a tiny dot to a full pie, too. We just need to animate radius.

There's a problem, though. PieSeries does not have any radius settings.

The PieChart does. So in this case, we are going to be modifying "hidden" state of the chart itself.

chart.hiddenState.properties.radius = am4core.percent(0);

chart.hiddenState.properties.radius = am4core.percent(0);

{
  // ...
  "hiddenState": {
    "properties": {
      "radius": "0%"
    }
  }
}

See the Pen amCharts 4: animating pie series by amCharts team (@amcharts) on CodePen.0

Fly-in

Now, let's make our slices "fly in".

This too will involve configuring elements other than the Pie series itself. Namely template of the Series slices.

The slice template is accessible via Series' slices.template. So we will need to manipulate that object's "hidden" state.

But wait, there's a catch. While chart object and series normally have have their hidden/default state application process enabled, slices don't. We'll need to enable that manually.

A property responsible for that is showOnInit. If we want an element to be hidden and revealed on chart init (causing it to go through the "hidden" and "default" theme application process), we need to set it to true.

Once that is taken care of, we just need to find a proper Slice property to animate: shiftRadius.

pieSeries.slices.template.showOnInit = true;
pieSeries.slices.template.hiddenState.properties.shiftRadius = 1;

pieSeries.slices.template.showOnInit = true;
pieSeries.slices.template.hiddenState.properties.shiftRadius = 1;

{
  "series": [{
    // ...
    "slices": {
      "showOnInit": true,
      "hiddenState": {
        "properties": {
          "shiftRadius": 1
        }
      }
    }
  }]
}

See the Pen amCharts 4: animating pie series by amCharts team (@amcharts) on CodePen.0

Multi-property effect

As we mentioned earlier, we can combine multiple properties to be animated during state transition.

Let's use both radius and innerRadius of the chart to create an effect, we're struggling with finding name for.

chart.innerRadius = am4core.percent(30);
chart.hiddenState.properties.innerRadius = am4core.percent(0);
chart.hiddenState.properties.radius = am4core.percent(100);

chart.innerRadius = am4core.percent(30);
chart.hiddenState.properties.innerRadius = am4core.percent(0);
chart.hiddenState.properties.radius = am4core.percent(100);

{
  // ...
  "innerRadius: "30%",
  "hiddenState": {
    "properties": {
      "radius": "100%",
      "innerRadius": "0%"
    }
  }
}

This should cause outer radius to shrink from the initial 100%, while at the same time inner cut out growing from none to the 30% we have set in chart's config.

See the Pen amCharts 4: animating pie series by amCharts team (@amcharts) on CodePen.0