Data Labels

6 Mar 20183 minutes to read

Sunburst data labels are used to display the data related to the segment. It helps to provide the information about the data points to the users.
You can enable or disable the data labels by setting the visible property of the e-datalabelsettings to true as shown in the below code

  • JS
    • <div id="container" ej-sunburstchart e-datalabelsettings-visible="true" >					
</div>

    Label Overflow mode

    When you represent huge data with data labels, they may intersect each other. You can avoid this using the e-datalabelsettings-labelOverflowMode property.

    The following properties are used to avoid the overlapping.

    • Trim – To trim the large data labels.
    • Hide – To hide the overlapped data labels.
      The following code shows how to set Hide and Trim mode.
  • JS
    • <div id="container" ej-sunburstchart e-datalabelsettings-labeloverflowmode="hide" >					
</div>

  • JS
    • <div id="container" ej-sunburstchart e-datalabelsettings-labeloverflowmode="trim" >					
</div>

    Label Rotation Mode

    You can rotate the data label by using e-datalabelsettings-labelRotationMode property. By default, the labelRotationMode is set as angle.

    The following code shows how to set labelRotationMode as normal and angle.

  • JS
    • <div id="container" ej-sunburstchart e-datalabelsettings-labelrotationmode="normal" >					
</div>

  • JS
    • <div id="container" ej-sunburstchart e-datalabelsettings-labelrotationmode="angle" >					
</div>

    Customizing the data labels

    You can customize the appearance of the data point using the font property.

  • JS
    • <div id="container" ej-sunburstchart e-datalabelsettings-font-color="black" 
e-datalabelsettings-font-fontWeight="bold" e-datalabelsettings-font-size="15px">					
</div>

    Sunburst Chart Title & Subtitle

    Title & TextAlignment

    By using the title option, you can add the e-title-text as well as customize its e-title-border, e-title-background and e-title-font.

    You can change the title alignment to center, far and near by using the e-title-textAlignment property of the Title.

  • JS
    • <div id="container" ej-sunburstchart e-title-visible="true" e-title-textalignment="near" e-title-text="" 
e-title-border-color="blue" e-title-border-width="2" e-title-font-size="15px"
e-title-font-fontFamily="Arial" e-title-font-fontStyle="bold" e-title-font-fontWeight="normal">					
</div>

    Sub Title & TextAlignment

    By using the subTitle option, you can add the e-title-subTitle-text as well as customize its e-title-subTitle-border, e-title-subTitle-background and e-title-subTitle-font.

  • JS
    • <div id="container" ej-sunburstchart e-title-subTitle-visible="true" e-title-subTitle-textalignment="near" e-title-subTitle-text="" 
e-title-subTitle-border-color="blue" e-title-subTitle-border-width="2" e-title-subTitle-font-size="15px"
e-title-subTitle-font-fontFamily="Arial" e-title-subTitle-font-fontStyle="bold" e-title-subTitle-font-fontWeight="normal">					
</div>