Animation

6 Jun 20232 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.