Class CircularDataLabelSettings

The CircularDataLabelSettings class is used to customize the appearance of circular series data labels.

Inheritance

System.Object

ChartDataLabelSettings

CircularDataLabelSettings

Inherited Members

ChartDataLabelSettings.RotationProperty

ChartDataLabelSettings.BackgroundProperty

ChartDataLabelSettings.BorderThicknessProperty

ChartDataLabelSettings.BorderBrushProperty

ChartDataLabelSettings.MarginProperty

ChartDataLabelSettings.FontStyleProperty

ChartDataLabelSettings.FontSizeProperty

ChartDataLabelSettings.ForegroundProperty

ChartDataLabelSettings.UseSeriesPaletteProperty

ChartDataLabelSettings.HighlightOnSelectionProperty

ChartDataLabelSettings.HorizontalAlignmentProperty

ChartDataLabelSettings.VerticalAlignmentProperty

ChartDataLabelSettings.ConnectorHeightProperty

ChartDataLabelSettings.ConnectorRotationProperty

ChartDataLabelSettings.ConnectorLineStyleProperty

ChartDataLabelSettings.ContentTemplateProperty

ChartDataLabelSettings.FontFamilyProperty

ChartDataLabelSettings.ContextProperty

ChartDataLabelSettings.FormatProperty

ChartDataLabelSettings.Rotation

ChartDataLabelSettings.Background

ChartDataLabelSettings.BorderThickness

ChartDataLabelSettings.BorderBrush

ChartDataLabelSettings.Margin

ChartDataLabelSettings.FontStyle

ChartDataLabelSettings.FontSize

ChartDataLabelSettings.Foreground

ChartDataLabelSettings.UseSeriesPalette

ChartDataLabelSettings.HighlightOnSelection

ChartDataLabelSettings.HorizontalAlignment

ChartDataLabelSettings.VerticalAlignment

ChartDataLabelSettings.ConnectorHeight

ChartDataLabelSettings.ConnectorRotation

ChartDataLabelSettings.ConnectorLineStyle

ChartDataLabelSettings.ShowConnectorLine

ChartDataLabelSettings.ContentTemplate

ChartDataLabelSettings.FontFamily

ChartDataLabelSettings.Series

ChartDataLabelSettings.Context

ChartDataLabelSettings.Format

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 option.

Xaml
C#

   <chart:SfCircularChart>

      <chart:PieSeries ItemsSource ="{Binding Data}"
                       XBindingPath="XValue"
                       YBindingPath="YValue"
                       ShowDataLabels="True"/>

   </chart:SfCircularChart>

    SfCircularChart chart = new SfCircularChart();
    ViewModel viewModel = new ViewModel();

    PieSeries series = new PieSeries()
    {
       ItemsSource = viewModel.Data,
       XBindingPath = "XValue",
       YBindingPath = "YValue",
       ShowDataLabels = true
    };

    chart.Series.Add(series);

ContentTemplate

The appearance of the data label can be customized using the ContentTemplate property of CircularDataLabelSettings.

Xaml

   <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.

Xaml
C#

   <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>

    SfCircularChart chart = new SfCircularChart();
    ViewModel viewModel = new ViewModel();

    PieSeries series = new PieSeries()
    {
       ItemsSource = viewModel.Data,
       XBindingPath = "XValue",
       YBindingPath = "YValue",
       ShowDataLabels = true
    };

    series.DataLabelSettings = new CircularDataLabelSettings()
    {
         Context = LabelContext.Percentage,
    };

    chart.Series.Add(series);

Customization

To change the appearance of data labels, it offers BorderBrush, BorderThickness, Margin, Foreground, Background, FontStyle, FontSize, and FontFamily options.

Xaml
C#

   <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>

    SfCircularChart chart = new SfCircularChart();
    ViewModel viewModel = new ViewModel();

    PieSeries series = new PieSeries()
    {
       ItemsSource = viewModel.Data,
       XBindingPath = "XValue",
       YBindingPath = "YValue",
       ShowDataLabels = true,
    };

    series.DataLabelSettings = new CircularDataLabelSettings()
    {
        Foreground = new SolidColorBrush(Colors.White),
        BorderBrush = new SolidColorBrush(Colors.Black),
        Background = new SolidColorBrush(Color.FromArgb(255, 30, 136, 229)),
        BorderThickness = new Thickness(1),
        Margin = new Thickness(1),
        FontStyle = FontStyle.Italic,
        FontFamily = new FontFamily("Calibri"),
        FontSize = 11,
    };

    chart.Series.Add(series);

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.

Xaml
C#

   <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>

    SfCircularChart chart = new SfCircularChart();
    ViewModel viewModel = new ViewModel();

    PieSeries series = new PieSeries()
    {
       ItemsSource = viewModel.Data,
       XBindingPath = "XValue",
       YBindingPath = "YValue",
       ShowDataLabels = true
    };

    DoubleCollection doubleCollection = new DoubleCollection();
    doubleCollection.Add(5);
    doubleCollection.Add(3);
    var connectorLineStyle = new Style() { TargetType = typeof(Path) };
    connectorLineStyle.Setters.Add(new Setter(Path.StrokeDashArrayProperty, doubleCollection));

    series.DataLabelSettings = new CircularDataLabelSettings()
    {
        Position = CircularSeriesLabelPosition.Outside,
        ShowConnectorLine = true,
        ConnectorHeight = 40,
        ConnectorLineStyle = connectorLineStyle,
    };

    chart.Series.Add(series);

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 `ConnectorType` dependency property.

PositionProperty

Identifies the Position dependency property.

Declaration

public static readonly DependencyProperty PositionProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for `Position` dependency property.

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.

   <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>

    SfCircularChart chart = new SfCircularChart();
    ViewModel viewModel = new ViewModel();

    PieSeries series = new PieSeries()
    {
       ItemsSource = viewModel.Data,
       XBindingPath = "XValue",
       YBindingPath = "YValue",
       ShowDataLabels = true
    };

    series.DataLabelSettings = new CircularDataLabelSettings()
    {
         ConnectorType = ConnectorMode.Bezier,
    };

    chart.Series.Add(series);

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

Xaml
C#

   <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>

    SfCircularChart chart = new SfCircularChart();
    ViewModel viewModel = new ViewModel();

    PieSeries series = new PieSeries()
    {
       ItemsSource = viewModel.Data,
       XBindingPath = "XValue",
       YBindingPath = "YValue",
       ShowDataLabels = true
    };

    series.DataLabelSettings = new CircularDataLabelSettings()
    {
         Position = CircularSeriesLabelPosition.Outside,
    };

    chart.Series.Add(series);