ComponentOne Xamarin Edition
Controls > FlexChart > Features > Animation

FlexChart allows you to enable animation effects using one of the two ways, either on loading when the chart is drawn or on updating when the chart is redrawn after modifications. It supports animation in charts through C1Animation class available in the C1.Xamarin.Forms.Core namespace.

The following GIF shows animation in FlexChart.

You can also set the duration of animation in chart using Duration property of the C1Animation class and interpolate values of animation using Easing property of the C1Animation class, which accepts values from the C1Easing class. This class supports a collection of standard easing functions such as CircleIn, CircleOut, and Linear.

Copy Code
C1Animation animate = new C1Animation();
// set update animation duration
animate.Duration = new TimeSpan(3000 * 10000);
// interpolate the values of animation
animate.Easing = C1Easing.Linear;

In addition to easing functions of C1Easing class, FlexChart supports built in easing functions of Xamarin.Forms.Easing class. For more information, refer Xamarin Easing Class.

You can show animation while loading or updating a chart. To show animation while loading the chart, use LoadAnimation property of the ChartBase class, which gets the load animation from the object of C1Animation class. Similarly, to animate the chart when underlying data collection changes on adding, removing, or modifying a value, you can use UpdateAnimation property of the ChartBase class.

Copy Code
// set the loading animation
chart.LoadAnimation = animate;

You can apply the animation effect by setting the AnimationMode property which accepts values from AnimationMode enumeration. This enumeration supports four different animation modes: All, None, Series, and Point.

Copy Code
// set the animation mode
chart.AnimationMode = AnimationMode.Series;