Animation

21 Mar 20171 minute to read

Sunburst chart allows you to animate the chart segments. You can enable animation using EnableAnimation property.

cshtml

@(Html.EJ().SunburstChart("chartContainer")

     //...Enable Animation
      .EnableAnimation(true)
      //...
 )

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.

Fade In

The Fade In animation is enabled as follows

cshtml

@(Html.EJ().SunburstChart("chartContainer")

     //...Enable Animation
      .EnableAnimation(true)
      .SunburstAnimationType(SunburstAnimationType.FadeIn)
      //...
 )

Rotation

The following example shows how to enable rotation animation in ejSunburstChart

cshtml

@(Html.EJ().SunburstChart("chartContainer")

     //...Enable Animation
      .EnableAnimation(true)
      .SunburstAnimationType(SunburstAnimationType.Rotation)
      //...
 )

Click here to view the online demo sample of Animation in the Sunburst Chart.