How to create animated chart in Xamarin.Forms?
The Xamarin.Forms Charts will animate seamlessly in two ways: when you first load the chart or when you redraw it after modifying the data points. This section explains both ways of animating chart control.
How to animate a chart on loading
Using the built-in APIs, we can animate the chart with regulating duration. The EnableAnimation property is used to create an animated chart and the AnimationDuration property in the chart series is used to control the speed of the animation and its default value is set to 1.
…
<syncfusion:ColumnSeries EnableAnimation="True" AnimationDuration="0.8" Color="White" Spacing="0.3" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
…
Output
How to animate a chart programmatically
Consider the use case like to add data point dynamically to this series with having animation then, it will be achieved by using the Animate method of series as shown in below.
<StackLayout Margin="30">
<syncfusion:SfChart BackgroundColor="#d11f5b" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis LabelPlacement="BetweenTicks" ShowMajorGridLines="False">
…
</syncfusion:CategoryAxis>
</syncfusion:SfChart.PrimaryAxis>
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis EdgeLabelsDrawingMode="Fit" ShowMinorGridLines="False" ShowMajorGridLines="False" >
…
</syncfusion:NumericalAxis>
</syncfusion:SfChart.SecondaryAxis>
<syncfusion:ColumnSeries x:Name="series" EnableAnimation="True" AnimationDuration="0.8" Color="White" Spacing="0.3" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/>
</syncfusion:SfChart>
<Button Text="Add data point" Clicked="Button_Clicked"/>
</StackLayout>
private void Button_Clicked(object sender, EventArgs e)
{
//Data is a collection of Model which is populated to the series.
(BindingContext as DataModel).Data.Add(new Model( 30, 90));
//Animate() is used to animate the series.
series.Animate();
}
Output
See also
How to make animation work on the chart in release mode with Android Proguard
How to perform zooming function in Xamarin.Forms Chart
How to get the grouping stacked series in Xamarin.Forms Chart
Conclusion
I hope you enjoyed learning about how to create animated chart in Xamarin.Forms.
You can refer to our Xamarin Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin Chart Documentation to understand how to present and manipulate data.
For current customers, you can check out our Xamarin components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Xamarin Chart and other Xamarin components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!
