# Animation

## Content



Animation gives an edge to any application and enhances the user experience by bringing life to its otherwise static elements.

FlexChart provides out of the box features to animate the charts. The [AnimationSettings](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.Chart/C1.WinUI.Chart.FlexChart.AnimationSettings.html) property of [FlexChart](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.Chart/C1.WinUI.Chart.FlexChart.html) class allows you to choose whether and where to show the animation. This property accepts the values from [AnimationSettings](/componentone/docs/winui/online-winui/) enumeration and lets you set the animation to appear in case of chart load or update, axes load or update or in all situations. Variety of animation options help in making your charts dynamic and can be set using the [AnimationLoad](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.Chart/C1.WinUI.Chart.FlexChart.AnimationLoad.html) and [AnimationUpdate](/componentone/api/winui/online-winui/dotnet-api/C1.WinUI.Chart/C1.WinUI.Chart.FlexChart.AnimationUpdate.html) properties. These properties are of [AnimationLoadOptions](/componentone/docs/winui/online-winui/) and [AnimationOptions](/componentone/docs/winui/online-winui/) type respectively and gives you access to the properties to set these options such as easing effects, duration, direction, type etc.

The following GIF shows animation in FlexChart.

| ![](https://cdn.mescius.io/document-site-files/images/2d49eac2-0942-4770-99ef-52b14e6815bd/images/flexchart-animation.gif) |
| --- |

To show animation on loading data in FlexChart, use the following code. This sample uses the same datasource as used in [Quick Start](/componentone/docs/winui/online-winui/winui-controls/flexchart-overview/flexchart-quickstart).

```csharp
public Animation()
{
    this.InitializeComponent();
    this.Loaded += Animation_Loaded;
    // Apply animation to chart
    flexChart.AnimationSettings = C1.Chart.AnimationSettings.All;
    flexChart.AnimationUpdate.Easing = C1.Chart.Easing.Linear;
    flexChart.AnimationUpdate.Duration = 500;
    flexChart.AnimationLoad.Type = C1.Chart.AnimationType.Series;
}
private void Animation_Loaded(object sender, RoutedEventArgs e)
{
    flexChart.ItemsSource = DataService.GetProductRevenue();
}
```

### Animation in Pie Chart

In the case of a pie chart or sunburst chart, AnimationSettings property of the FlexPie class lets you set the animation on chart load, update or both. Just like FlexChart class, the FlexPie class also lets you set the AnimationLoad and AnimationUpdate properties to specify various animation options such as easing, duration, as well as the slice attributes through PieAnimationOptions class.

The following GIF shows animation in FlexChart.

| ![](https://cdn.mescius.io/document-site-files/images/2d49eac2-0942-4770-99ef-52b14e6815bd/images/flexchart-pie-animation.gif) |
| --- |

To show animation on loading data in Pie chart, use the following code. This sample uses a custom method named GetCarSales to supply data from the datasource used in [Quick Start](/componentone/docs/winui/online-winui/winui-controls/datafilter-overview/datafilter-quickstart).

```csharp
// Apply animation to pie chart
flexPie.AnimationSettings = C1.Chart.AnimationSettings.Load;
flexPie.AnimationUpdate.Easing = C1.Chart.Easing.Linear;
flexPie.AnimationUpdate.Duration = 500;
flexPie.AnimationLoad.Type = C1.Chart.AnimationType.Series;
```