Selection in JQuery SunburstChart widget

EjSunburstChart provides selection support for the points on mouse click. To enable the selection , set the enable property to true in the selectionSettings.

  • js
  • $("#chart").ejSunburstChart({
    
              //..         
              selectionSettings: { enable: true },         
             //..
    
    });

    Selection_img1

    Selection in JQuery SunburstChart widgetDisplay mode

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

    • selectionByColor – To display the selected segment appearance using color.
    • selectionByOpacity – To display the selected segment appearance using opacity.
  • js
  • $("#chart").ejSunburstChart({
    
              //..         
              selectionSettings: { enable: true, type:"color",color:"red" },         
              //..
    
    });

    Selection_img2

    Selection in JQuery SunburstChart widgetMode

    Sunburst chart provides multiple options to represent the selected categories. You can select the segment categories by using the mode property in selectionSettings

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

    Child

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

  • js
  • $("#chart").ejSunburstChart({
    
              //..         
              selectionSettings: { enable: true,mode:"child"},         
              //..
    
    });

    Selection_img3

    Parent

    The parent mode can be enabled by using the below code

  • js
  • $("#chart").ejSunburstChart({
    
              //..         
              selectionSettings: { enable: true,mode:"parent"},         
             //..
    
    });

    Selection_img4

    Point

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

  • js
  • $("#chart").ejSunburstChart({
    
              //..         
              selectionSettings: { enable: true,mode:"point"},         
             //..
    
    });

    Selection_img5

    All

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

  • js
  • $("#chart").ejSunburstChart({
    
              //..         
              selectionSettings: { enable: true,mode:"all"},         
              //..
    
    });

    Selection_img6

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