Highlight

7 Dec 2017 / 4 minutes to read

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

javascript

/// <reference path="tsfiles/jquery.d.ts" />
/// <reference path="tsfiles/ej.web.all.d.ts" />

module  sunburstComponent {
    $(function () {
        var sample = new ej.datavisualization.SunburstChart($("#Sunburst"),{
            // ...
         highlightSettings: { enable: true },     	
            // ...
        });
    });
}

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.

javascript

$(function () {

var sample = new ej.datavisualization.SunburstChart($("#Sunburst"),{
            // ...
         highlightSettings: { enable: true, type:"color",color:"red" },     	

            // ...

        });
    });

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

javascript

$(function () {

var sample = new ej.datavisualization.SunburstChart($("#Sunburst"),{
            // ...
         highlightSettings: { enable: true, mode:"child" },     	

            // ...

        });
    });

Parent

The parent mode can be enabled by using the below code

javascript

var sample = new ej.datavisualization.SunburstChart($("#Sunburst"),{
            // ...
         highlightSettings: { enable: true, mode:"parent" },     	

            // ...

        });
    });

Point

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

javascript

var sample = new ej.datavisualization.SunburstChart($("#Sunburst"),{
            // ...
         highlightSettings: { enable: true, mode:"point" },     	

            // ...

        });
    });

All

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

javascript

var sample = new ej.datavisualization.SunburstChart($("#Sunburst"),{
            // ...
         highlightSettings: { enable: true, mode:"all" },     	

            // ...

        });
    });