Animation in WPF Charts (SfChart)

8 Jul 20262 minutes to read

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

The following types of series support Animation.

  • Line
  • Column
  • Bar
  • Area
  • Scatter
  • Bubble
  • Spline
  • Spline Area
  • Stacking Column
  • Stacking Bar
  • Stacking Area
  • Pie

The following APIs are used to customize the Animation.

  • EnableAnimation - Represents a boolean value to enable the animation for series. The default value is false.
  • AnimationDuration - Represents a TimeSpan value that sets the animation speed for the series.

The following example shows the Animation feature for chart series.

<syncfusion:SfChart>
    <syncfusion:ColumnSeries 
        EnableAnimation="True" 
        AnimationDuration="00:00:03"
        XBindingPath="Category"
        YBindingPath="Count"
        ItemsSource="{Binding Data}"/>
</syncfusion:SfChart>
ColumnSeries columnSeries = new ColumnSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "Category",
    YBindingPath = "Count",
    EnableAnimation = true,
    AnimationDuration = new TimeSpan(00, 00, 03)
};

chart.Series.Add(columnSeries);

Column Series

WPF Chart Column Animation

Spline Area Series

WPF Chart Spline Area Animation

Scatter Series

WPF Chart Scatter Animation

NOTE

Set the EnableAnimation property to true to play the animation on loading the chart and whenever the ItemsSource is changed.

NOTE

If the AnimationDuration is set to 00:00:00 (zero), the animation will not be visible. Set a valid TimeSpan value for the animation to be played.

NOTE

You can refer to our WPF Charts feature tour page for its groundbreaking feature representations. You can also explore our WPF Charts example to know various chart types and how to easily configure them with built-in support for creating stunning visual effects.