Data Label in UWP Sunburst Chart (SfSunburstChart)
10 May 20215 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 using ShowLabel
property as shown in the below code
<sunburst:SfSunburstChart.DataLabelInfo>
<sunburst:SunburstDataLabelInfo ShowLabel="True" />
</sunburst:SfSunburstChart.DataLabelInfo>
SunburstDataLabelInfo dataLabelInfo = new SunburstDataLabelInfo()
{
ShowLabel = true
};
chart.DataLabelInfo = dataLabelInfo;
NOTE
By default, the ShowLabel property value is True.
LabelOverflowMode
When you represent huge data with data labels, they may intersect each other. You can avoid this using the 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.
Hide
<sunburst:SfSunburstChart.DataLabelInfo>
<sunburst:SunburstDataLabelInfo ShowLabel="True"
LabelOverflowMode="Hide"/>
</sunburst:SfSunburstChart.DataLabelInfo>
SunburstDataLabelInfo dataLabelInfo = new SunburstDataLabelInfo()
{
ShowLabel = true,
LabelOverflowMode = LabelOverflowMode.Hide
};
Trim
<sunburst:SfSunburstChart.DataLabelInfo>
<sunburst:SunburstDataLabelInfo ShowLabel="True"
LabelOverflowMode="Trim" />
</sunburst:SfSunburstChart.DataLabelInfo>
SunburstDataLabelInfo dataLabelInfo = new SunburstDataLabelInfo()
{
ShowLabel = true,
LabelOverflowMode =LabelOverflowMode.Trim
};
chart.DataLabelInfo = dataLabelInfo;
LabelRotationMode
You can rotate the data label by using LabelRotationMode
property.
The following code shows how to set LabelRotationMode
as normal and angle.
<sunburst:SfSunburstChart.DataLabelInfo>
<sunburst:SunburstDataLabelInfo ShowLabel="True"
LabelRotationMode="Normal"/>
</sunburst:SfSunburstChart.DataLabelInfo>
SunburstDataLabelInfo dataLabelInfo = new SunburstDataLabelInfo()
{
ShowLabel = true,
LabelRotationMode = LabelRotationMode.Normal
};
chart.DataLabelInfo = dataLabelInfo;
NOTE
By default, LabelRotationMode value is Angle.
Customizing the data labels
You can customize the default appearance or display information about the data point using the LabelTemplate
property.
<sunburst:SunburstDataLabelInfo.LabelTemplate>
<DataTemplate>
<Border Background="LightGray" CornerRadius="4" >
<TextBlock Text="{Binding Category}" Margin="2,0,2,0"
FontWeight="Bold"/>
</Border>
</DataTemplate>
</sunburst:SunburstDataLabelInfo.LabelTemplate>