Skip to content

Commit 1b5ce26

Browse files
Merge pull request #1 from SyncfusionExamples/WPF-61990-Update-readme
WPF-61990 Update readme
2 parents 0e9e8d5 + 742d153 commit 1b5ce26

File tree

1 file changed

+46
-4
lines changed

1 file changed

+46
-4
lines changed

README.md

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,49 @@
11
# How to create animated chart in Xamarin.Forms
22

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-
![](https://github.com/SyncfusionExamples/How-to-create-animated-chart-in-Xamarin.Forms/blob/main/Create-Animated-Charts-and-Graphs.gif)
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+
![Animated chart in Xamarin.Forms](https://github.com/SyncfusionExamples/How-to-create-animated-chart-in-Xamarin.Forms/blob/main/Create-Animated-Charts-and-Graphs.gif)
16+
617
## To animate on programmatically
7-
![](https://github.com/SyncfusionExamples/How-to-create-animated-chart-in-Xamarin.Forms/blob/main/Programmatically-animated-chart.gif)
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+
![Animate Xamarin.Forms chart programmatically](https://github.com/SyncfusionExamples/How-to-create-animated-chart-in-Xamarin.Forms/blob/main/Programmatically-animated-chart.gif)
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

Comments
 (0)