Animation in UWP Charts (SfChart)

7 Jan 20252 minutes to read

SfChart Animation allows you to animate the chart series on loading, and whenever the ItemsSource changes. Animation in chart can be enabled by setting the EnableAnimation property as True and defining the corresponding animation speed with AnimationDuration property.

The following types of series support Animation.

  • Line
  • Column
  • Bar
  • Area
  • Scatter
  • Bubble
  • Spline
  • Spline area
  • Step line
  • Step area
  • Range column
  • Range area
  • Histogram
  • Stacking column
  • Stacking bar
  • Stacking area
  • Pie
  • Polar/Radar

The following APIs are used to customize the Animation.

Customization API for Animation

Property Definition
EnableAnimation Gets or sets the bool value that represents a value to enable the animation for series.
AnimationDuration Gets or sets the TimeSpan value that represents the animation speed for the chart.

The following example shows the Animation feature for chart series.

<syncfusion:SfChart>

    <syncfusion:ColumnSeries EnableAnimation="True" 

                             AnimationDuration="00:00:02" 

                             Palette="Metro" 

                             XBindingPath="Category" 

                             YBindingPath="Count"

                             ItemsSource="{Binding Data}"/>

 </syncfusion:SfChart>
ColumnSeries columnSeries = new ColumnSeries()
{

        ItemsSource = new ViewModel().Data,

        XBindingPath = "Category",

        YBindingPath = "Count",

        Palette = ChartColorPalette.Metro,

        EnableAnimation = true,

        AnimationDuration = new TimeSpan(00, 00, 02)

};

chart.Series.Add(columnSeries);