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.
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.
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.
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.
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.