WinUI

Code Examples Upgrade Guide User Guide Demos Support Forums Download
  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class CircularDataLabelSettings

    Show / Hide Table of Contents

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

    Examples
    • Xaml
    • C#
       <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);
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved