Animation

12 May 2017 / 2 minutes to read

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

  • js
  • "use strict";
    ReactDOM.render(
        <EJ.SunburstChart id = "sunburst1"          
        enableAnimation = {true}
        >                  
        </EJ.SunburstChart>,
              document.getElementById('sunburst')
    );

    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

  • js
  • "use strict";
    ReactDOM.render(
        <EJ.SunburstChart id = "sunburst1"          
        enableAnimation = {true}
        animationType = "fadeIn">                  
        </EJ.SunburstChart>,
              document.getElementById('sunburst')
    );

    Rotation

    The following example shows how to enable rotation animation in ejSunburstChart

  • js
  • "use strict";
    ReactDOM.render(
        <EJ.SunburstChart id = "sunburst1"          
        enableAnimation = {true}
        animationType = "rotation">                  
        </EJ.SunburstChart>,
              document.getElementById('sunburst')
    );

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