Highlight

6 Jun 20234 minutes to read

EjSunburstChart provides highlighting support for the points on mouse hover. To enable the highlighting , set the enable property to true in the highlightSettings.

JS

"use strict";
 var highlightSettings = { enable: true };
 ReactDOM.render(
    <EJ.SunburstChart id = "sunburst1"      
    highlightSettings ={highlightSettings}    
    >                  
    </EJ.SunburstChart>,
          document.getElementById('sunburst')
);

Highlight Display mode

You can customize the highlighted segment appearance by using color or opacity. You can choose between color or opacity using the type property in the highlight Settings.

• HighlightByColor – To display the highlighted segment appearance using color.
• HighlightByOpacity – To display the highlighted segment appearance using opacity.

JS

"use strict";
 var highlightSettings = { enable: true, type:"color",color:"red" };
 ReactDOM.render(
    <EJ.SunburstChart id = "sunburst1"      
    highlightSettings ={highlightSettings}    
    >                  
    </EJ.SunburstChart>,
          document.getElementById('sunburst')
);

Highlight Mode

Sunburst chart provides multiple options to represent the highlighted categories. You can highlight the segment categories by using the mode property in highlightSettings

• Child – To highlight the child of selected parent.
• All – To highlight the entire categories in group.
• Parent – To highlight the parent of selected child.
• Single - To highlight single item in the category.

Child

The following code shows how to set the highlight type as child

JS

"use strict";
 var highlightSettings = { enable: true,mode:"child" };
 ReactDOM.render(
    <EJ.SunburstChart id = "sunburst1"      
    highlightSettings ={highlightSettings}    
    >                  
    </EJ.SunburstChart>,
          document.getElementById('sunburst')
);

Parent

The parent mode can be enabled by using the below code

JS

"use strict";
 var highlightSettings = { enable: true,mode:"parent"};
 ReactDOM.render(
    <EJ.SunburstChart id = "sunburst1"      
    highlightSettings ={highlightSettings}    
    >                  
    </EJ.SunburstChart>,
          document.getElementById('sunburst')
);

Point

To highlight the particular segment, the point mode of the highlight settings is used.

JS

"use strict";
 var highlightSettings = { enable: true,mode:"point"};
 ReactDOM.render(
    <EJ.SunburstChart id = "sunburst1"      
    highlightSettings ={highlightSettings}    
    >                  
    </EJ.SunburstChart>,
          document.getElementById('sunburst')
);

All

The following code snippet is used for the all mode of highlight settings

JS

"use strict";
var highlightSettings = { enable: true,mode:"all"};
ReactDOM.render(
    <EJ.SunburstChart id = "sunburst1"      
    highlightSettings ={highlightSettings}    
    >                  
    </EJ.SunburstChart>,
          document.getElementById('sunburst')
);

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