Animation in UWP Sunburst Chart (SfSunburstChart)

10 May 20212 minutes to read

Sunburst chart allows you to animate the chart segments. You can enable animation using EnableAnimation property. Also you can set the duration for animation by using AnimationDuration property.

XAML

<sunburst:SfSunburstChart EnableAnimation="True" 
                          AnimationDuration="5000">

 </sunburst:SfSunburstChart>

C#

sunburstChart.EnableAnimation = true;

sunburstChart.AnimationDuration = 5000;

Animation types

Sunburst chart provide options to animate the chart segments in different ways using AnimationType property.

FadeIn – It gradually changes opacity of the chart segment.

Rotation – During an animation, control rotate from 0 to 360 angle.

FadeIn

The following example shows, how to enable the FadeIn animation.

XAML

<sunburst:SfSunburstChart EnableAnimation="True"                                
                            AnimationType="FadeIn">
                            
  </sunburst:SfSunburstChart>

C#

sunburstChart.EnableAnimation = true;
sunburstChart.AnimationType = AnimationType.FadeIn;

Rotation

The following example shows, how to enable the Rotation animation.

XAML

<sunburst:SfSunburstChart EnableAnimation="True"                                
                            AnimationType="Rotation">

  </sunburst:SfSunburstChart>

C#

sunburstChart.EnableAnimation = true;
sunburstChart.AnimationType = AnimationType.Rotation;