Data Labels

25 Mar 20213 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 DataLabelSettings to true as shown in the below code

  • html
  • <ej:SunburstChart  ID="container" runat="server"> 
    <DataLabelSettings Visible="true"></DataLabelSettings>                             
    </ej:SunburstChart>

    ASPNET SunburstChart DataLabel Image1

    Label Overflow mode

    When you represent huge data with data labels, they may intersect each other. You can avoid this using the SunburstLabelOverflowMode 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.
  • html
  • <ej:SunburstChart  ID="container" runat="server"> 
    <DataLabelSettings Visible="true" SunburstLabelOverflowMode="hide"></DataLabelSettings>                             
    </ej:SunburstChart>

    ASPNET SunburstChart DataLabel Image2

  • html
  • <ej:SunburstChart  ID="container" runat="server"> 
    <DataLabelSettings Visible="true" SunburstLabelOverflowMode="trim"></DataLabelSettings>                             
    </ej:SunburstChart>

    ASPNET SunburstChart DataLabel Image3

    Label Rotation Mode

    You can rotate the data label by using SunburstLabelRotationMode property. By default, the SunburstLabelRotationMode is set as angle.

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

  • html
  • <ej:SunburstChart  ID="container" runat="server"> 
    <DataLabelSettings Visible="true" SunburstLabelRotationMode="normal"></DataLabelSettings>                             
    </ej:SunburstChart>

    ASPNET SunburstChart DataLabel Image4

  • html
  • <ej:SunburstChart  ID="container" runat="server"> 
    <DataLabelSettings Visible="true" SunburstLabelRotationMode="angle"></DataLabelSettings>                             
    </ej:SunburstChart>

    ASPNET SunburstChart DataLabel Image5

    Customizing the data labels

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

  • html
  • <ej:SunburstChart  ID="container" runat="server"> 
    <DataLabelSettings Visible="true" SunburstLabelRotationMode="angle">
    <Font Color="Black" Font-Weight="bold" Size="15px"></Font>
    </DataLabelSettings>                             
    </ej:SunburstChart>

    ASPNET SunburstChart DataLabel Image6