Highlight
28 Jun 20172 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 e-highlightsettings
.
<div id="container" ej-sunburstchart e-highlightsettings-enable="true" >
</div>
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.
<div id="container" ej-sunburstchart e-highlightsettings-enable="true" e-highlightsettings-type="color" e-highlightsettings-color="red">
</div>
Highlight Mode
Sunburst chart provides multiple option 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
<div id="container" ej-sunburstchart e-highlightsettings-enable="true" e-highlightsettings-mode="child">
</div>
Parent
The parent mode can be enabled by using the below code
<div id="container" ej-sunburstchart e-highlightsettings-enable="true" e-highlightsettings-mode="parent">
</div>
Point
To highlight the particular segment, the point mode of the highlight settings is used.
<div id="container" ej-sunburstchart e-highlightsettings-enable="true" e-highlightsettings-mode="point">
</div>
All
The following code snippet is used for the all mode of highlight settings
<div id="container" ej-sunburstchart e-highlightsettings-enable="true" e-highlightsettings-mode="all">
</div>
Click here to view the online demo sample of Highlight in the Sunburst Chart.