Class CircularDataLabelSettings
The CircularDataLabelSettings class is used to customize the appearance of circular series data labels.
Inherited Members
Namespace: Syncfusion.UI.Xaml.Charts
Assembly: Syncfusion.Chart.WinUI.dll
Syntax
public sealed class CircularDataLabelSettings : ChartDataLabelSettings
Remarks
To customize data labels, create an instance of the CircularDataLabelSettings class, and set it to the DataLabelSettings property of the circular series.
ShowDataLabels
Data labels can be added to a chart series by enabling the
<chart:SfCircularChart>
<chart:PieSeries ItemsSource ="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
ShowDataLabels="True"/>
</chart:SfCircularChart>
ContentTemplate
The appearance of the data label can be customized using the ContentTemplate property of CircularDataLabelSettings.
<chart:SfCircularChart>
<chart:PieSeries ItemsSource ="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
ShowDataLabels="True">
<chart:PieSeries.DataLabelSettings>
<chart:CircularDataLabelSettings>
<chart:CircularDataLabelSettings.ContentTemplate>
<DataTemplate>
<StackPanel Margin = "10" Orientation="Vertical">
<Ellipse Height = "15" Width="15" Fill="Cyan"
Stroke="#4a4a4a" StrokeThickness="2"/>
<TextBlock HorizontalAlignment = "Center" FontSize="12"
Foreground="Black" FontWeight="SemiBold"
Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</chart:CircularDataLabelSettings.ContentTemplate>
</chart:CircularDataLabelSettings>
</chart:PieSeries.DataLabelSettings>
</chart:PieSeries>
</chart:SfCircularChart>
Context
To customize the content of data labels, it offers the Context property.
<chart:SfCircularChart>
<chart:PieSeries ItemsSource ="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
ShowDataLabels="True">
<chart:PieSeries.DataLabelSettings>
<chart:CircularDataLabelSettings Context="Percentage" />
</chart:PieSeries.DataLabelSettings>
</chart:PieSeries>
</chart:SfCircularChart>
Customization
To change the appearance of data labels, it offers BorderBrush, BorderThickness, Margin, Foreground, Background, FontStyle, FontSize, and FontFamily options.
<chart:SfCircularChart>
<chart:PieSeries ItemsSource ="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
ShowDataLabels="True">
<chart:PieSeries.DataLabelSettings>
<chart:CircularDataLabelSettings Foreground="White" FontSize="11"
FontFamily="Calibri" BorderBrush="Black" BorderThickness="1" Margin="1"
FontStyle="Italic" Background="#1E88E5" />
</chart:PieSeries.DataLabelSettings>
</chart:PieSeries>
</chart:SfCircularChart>
ConnectorLine
A connector line is used to connect the label and data point using a line. The ShowConnectorLine property of CircularDataLabelSettings is used to enable the connector line in the circular chart. The connector line can be customized using ConnectorHeight, ConnectorLineStyle, and ConnectorType properties.
<chart:SfCircularChart>
<chart:PieSeries ItemsSource ="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
ShowDataLabels="True">
<chart:PieSeries.DataLabelSettings>
<chart:CircularDataLabelSettings Position="Outside" ConnectorHeight = "40" ShowConnectorLine="True">
<chart:CircularDataLabelSettings.ConnectorLineStyle>
<Style TargetType = "Path">
<Setter Property="StrokeDashArray" Value="5,3"/>
</Style>
</chart:CircularDataLabelSettings.ConnectorLineStyle>
</chart:CircularDataLabelSettings>
</chart:PieSeries.DataLabelSettings>
</chart:PieSeries>
</chart:SfCircularChart>
Constructors
CircularDataLabelSettings()
Initializes a new instance of the CircularDataLabelSettings class.
Declaration
public CircularDataLabelSettings()
Fields
ConnectorTypeProperty
Identifies the ConnectorType dependency property.
Declaration
public static readonly DependencyProperty ConnectorTypeProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
PositionProperty
Identifies the Position dependency property.
Declaration
public static readonly DependencyProperty PositionProperty
Field Value
Type | Description |
---|---|
Microsoft.UI.Xaml.DependencyProperty | The identifier for |
Properties
ConnectorType
Gets or sets a ConnectorMode value that can be used to specify the connector line type.
Declaration
public ConnectorMode ConnectorType { get; set; }
Property Value
Type | Description |
---|---|
ConnectorMode | It accepts ConnectorMode values and has a default value of Line. |
Examples
<chart:SfCircularChart>
<chart:PieSeries ItemsSource ="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"
ShowDataLabels="True">
<chart:PieSeries.DataLabelSettings>
<chart:CircularDataLabelSettings ConnectorType="Bezier" />
</chart:PieSeries.DataLabelSettings>
</chart:PieSeries>
</chart:SfCircularChart>
Position
Gets or sets the value for the data label's position based on the series type.
Declaration
public CircularSeriesLabelPosition Position { get; set; }
Property Value
Type | Description |
---|---|
CircularSeriesLabelPosition | It accepts CircularSeriesLabelPosition values and has a default value of Inside. |
Examples
<chart:SfCircularChart>
<chart:PieSeries ItemsSource ="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"
ShowDataLabels="True">
<chart:PieSeries.DataLabelSettings>
<chart:CircularDataLabelSettings Position="Outside" />
</chart:PieSeries.DataLabelSettings>
</chart:PieSeries>
</chart:SfCircularChart>