|
1 | 1 | # How to create animated chart in Xamarin.Forms |
2 | 2 |
|
3 | | -[Xamarin.Forms Charts](https://www.syncfusion.com/xamarin-ui-controls/xamarin-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 using [EnableAnimation](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfChart.XForms.ChartSeries.html#Syncfusion_SfChart_XForms_ChartSeries_EnableAnimation) property and [Animate](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfChart.XForms.ChartSeries.html#Syncfusion_SfChart_XForms_ChartSeries_Animate) method. To know more about this, please refer this [article](https://www.syncfusion.com/kb/12481/?utm_medium=listing&utm_source=github-examples) |
4 | | -## To animate on startup |
5 | | - |
| 3 | +[Xamarin.Forms Charts](https://www.syncfusion.com/xamarin-ui-controls/xamarin-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 using [EnableAnimation](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfChart.XForms.ChartSeries.html#Syncfusion_SfChart_XForms_ChartSeries_EnableAnimation) property and [Animate](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfChart.XForms.ChartSeries.html#Syncfusion_SfChart_XForms_ChartSeries_Animate) method. |
| 4 | + |
| 5 | +## How to animate a chart on loading |
| 6 | + |
| 7 | +Using the built-in APIs, we can animate the chart with regulating duration. The [EnableAnimation](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfChart.XForms.ChartSeries.html#Syncfusion_SfChart_XForms_ChartSeries_EnableAnimation) property is used to create an animated chart and the [AnimationDuration](https://help.syncfusion.com/cr/xamarin/Syncfusion.SfChart.XForms.ChartSeries.html#Syncfusion_SfChart_XForms_ChartSeries_AnimationDuration) property in the chart series is used to control the speed of the animation and its default value is set to 1. |
| 8 | + |
| 9 | +``` |
| 10 | +… |
| 11 | +<syncfusion:ColumnSeries EnableAnimation="True" AnimationDuration="0.8" Color="White" Spacing="0.3" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/> |
| 12 | +… |
| 13 | +``` |
| 14 | + |
| 15 | + |
| 16 | + |
6 | 17 | ## To animate on programmatically |
7 | | - |
| 18 | + |
| 19 | +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. |
| 20 | +``` |
| 21 | +<StackLayout Margin="30"> |
| 22 | + <syncfusion:SfChart BackgroundColor="#d11f5b" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> |
| 23 | + <syncfusion:SfChart.PrimaryAxis> |
| 24 | + <syncfusion:CategoryAxis LabelPlacement="BetweenTicks" ShowMajorGridLines="False"> |
| 25 | + … |
| 26 | + </syncfusion:CategoryAxis> |
| 27 | + </syncfusion:SfChart.PrimaryAxis> |
| 28 | + <syncfusion:SfChart.SecondaryAxis> |
| 29 | + <syncfusion:NumericalAxis EdgeLabelsDrawingMode="Fit" ShowMinorGridLines="False" ShowMajorGridLines="False" > |
| 30 | + … |
| 31 | + </syncfusion:NumericalAxis> |
| 32 | + </syncfusion:SfChart.SecondaryAxis> |
| 33 | + <syncfusion:ColumnSeries x:Name="series" EnableAnimation="True" AnimationDuration="0.8" Color="White" Spacing="0.3" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1"/> |
| 34 | + </syncfusion:SfChart> |
| 35 | + <Button Text="Add data point" Clicked="Button_Clicked"/> |
| 36 | +</StackLayout> |
| 37 | +``` |
| 38 | + |
| 39 | + |
| 40 | + |
| 41 | +KB article - [How to create animated chart in Xamarin.Forms](https://www.syncfusion.com/kb/12481/how-to-create-animated-chart-in-xamarin-forms) |
| 42 | + |
| 43 | +## See also |
| 44 | + |
| 45 | +[How to make animation work on the chart in release mode with Android Proguard](https://www.syncfusion.com/kb/10729/how-to-make-animation-work-on-chart-in-release-mode-with-android-proguard) |
| 46 | + |
| 47 | +[How to group stacking series in Xamarin.Forms Chart](https://www.syncfusion.com/kb/11724/how-to-group-stacking-series-in-the-xamarin-forms-chart) |
| 48 | + |
| 49 | +[How to perform zooming function in Xamarin.Forms Chart](https://help.syncfusion.com/xamarin/charts/zoompan#%22enable-zooming%22) |
0 commit comments