Angular Chart Animations

Animations allows you to ease-in the series as it loads a new data source. The available animation differs depending on the type of series involved. For example, the column series animates by rising from the x-axis, a line series animates by drawing from the origin of y-axis.

Animations are disabled in the Ignite UI for Angular Charts, but they can be enabled by setting the isTransitionInEnabled property to true. From there, you can set the transitionInDuration property to determine how long your animation should take to complete and the transitionInMode to determine the type of animation that takes place.

Angular Chart Animation Example

The following example depicts a Line Chart with an animation set to the default transitionInMode - "Auto." The drop-down and slider at the top in this example will allow you to modify the transitionInMode and transitionInDuration, respectively, so that you can see what the different supported animations look like at different speeds.

Additional Resources

You can find more information about related chart features in these topics:

• Chart Annotations
• Chart Highlighting
• Chart Tooltips

API References

The following is a list of API members mentioned in the above sections:

• IgxCategoryChartComponent
• isTransitionInEnabled
• transitionInDuration
• transitionInMode