Highlight

14 Aug 20171 minute 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.

  • CSHTML
    • @(Html.EJ().SunburstChart("chartContainer")

     .HighlightSettings(highlight=>highlight.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.
  • CSHTML
    • @(Html.EJ().SunburstChart("chartContainer")

     .HighlightSettings(highlight=>highlight.Enable(true).Type(SunburstHighlightType.Color).Color("Red"))
 )

    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

  • CSHTML
    • @(Html.EJ().SunburstChart("chartContainer")

     .HighlightSettings(highlight=>highlight.Enable(true).Mode(SunburstHighlightMode.Child))
 )

    Parent

    The parent mode can be enabled by using the below code

  • CSHTML
    • @(Html.EJ().SunburstChart("chartContainer")

     .HighlightSettings(highlight=>highlight.Enable(true).Mode(SunburstHighlightMode.Parent))
 )

    Point

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

  • CSHTML
    • @(Html.EJ().SunburstChart("chartContainer")

     .HighlightSettings(highlight=>highlight.Enable(true).Mode(SunburstHighlightMode.Point))
 )

    All

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

  • CSHTML
    • @(Html.EJ().SunburstChart("chartContainer")

     .HighlightSettings(highlight=>highlight.Enable(true).Mode(SunburstHighlightMode.All))
 )

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