Class PolarDataLabelSettings

    Show / Hide Table of Contents

    Class PolarDataLabelSettings

    The PolarDataLabelSettings class is used to customize the appearance of polar series data labels.

    Inheritance
    System.Object
    ChartDataLabelSettings
    PolarDataLabelSettings
    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 PolarDataLabelSettings : ChartDataLabelSettings
    Remarks

    To customize data labels, create an instance of PolarDataLabelSettings class, and set it to the DataLabelSettings property of the polar series.

    ShowDataLabels

    Data labels can be added to a chart series by enabling the ShowDataLabels option.

    • Xaml
    • C#
       <chart:SfPolarChart>
    
          <!-- ... Eliminated for simplicity-->
          <chart:PolarLineSeries ItemsSource ="{Binding Data}"
                                 XBindingPath="XValue"
                                 YBindingPath="YValue"
                                 ShowDataLabels="True"/>
    
       </chart:SfPolarChart>
        SfPolarChart chart = new SfPolarChart();
        ViewModel viewModel = new ViewModel();
    
        // Eliminated for simplicity
        PolarLineSeries series = new PolarLineSeries()
        {
           ItemsSource = viewModel.Data,
           XBindingPath = "XValue",
           YBindingPath = "YValue",
           ShowDataLabels = true
        };
    
        chart.Series.Add(series);

    ContentTemplate

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

    • Xaml
       <chart:SfPolarChart>
    
        <!-- ... Eliminated for simplicity-->
          <chart:PolarLineSeries ItemsSource ="{Binding Data}"
                                 XBindingPath="XValue"
                                 YBindingPath="YValue"
                                 ShowDataLabels="True">
    
               <chart:PolarLineSeries.DataLabelSettings>
                   <chart:PolarDataLabelSettings>
                       <chart:PolarDataLabelSettings.ContentTemplate>
                           <DataTemplate>
                              <Grid>
                                   <Ellipse Width = "30" Height="30" HorizontalAlignment="Left"
                                            VerticalAlignment="Top" Fill="White" Stroke="#0078DE" StrokeThickness="2" />
                                   <TextBlock HorizontalAlignment = "Center" VerticalAlignment="Center"
                                              Foreground="#FF585858" Text="{Binding}" TextWrapping="Wrap" />
                               </Grid>
                           </DataTemplate>
                       </chart:PolarDataLabelSettings.ContentTemplate>
                   </chart:PolarDataLabelSettings>
               </chart:PolarLineSeries.DataLabelSettings>
           </chart:PolarLineSeries>
       </chart:SfPolarChart>

    Context

    To customize the content of data labels, it offers Context property.

    • Xaml
    • C#
       <chart:SfPolarChart>
    
        <!-- ... Eliminated for simplicity-->
          <chart:PolarLineSeries ItemsSource ="{Binding Data}"
                                 XBindingPath="XValue"
                                 YBindingPath="YValue"
                                 ShowDataLabels="True">
             <chart:PolarLineSeries.DataLabelSettings>
                 <chart:PolarDataLabelSettings Context="Percentage" />
             </chart:PolarLineSeries.DataLabelSettings>
          <chart:PolarLineSeries />
       </chart:SfPolarChart>
        SfPolarChart chart = new SfPolarChart();
        ViewModel viewModel = new ViewModel();
    
        // Eliminated for simplicity
        PolarLineSeries series = new PolarLineSeries()
        {
           ItemsSource = viewModel.Data,
           XBindingPath = "XValue",
           YBindingPath = "YValue",
           ShowDataLabels = true
        };
    
        series.DataLabelSettings = new PolarDataLabelSettings()
        {
            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:SfPolarChart>
    
        <!-- ... Eliminated for simplicity-->
          <chart:PolarLineSeries ItemsSource ="{Binding Data}"
                                 XBindingPath="XValue"
                                 YBindingPath="YValue"
                                 ShowDataLabels="True">
             <chart:PolarLineSeries.DataLabelSettings>
                 <chart:PolarDataLabelSettings Foreground="White" FontSize="11" 
                                               FontFamily="Calibri" BorderBrush="Black" BorderThickness="1" Margin="1" 
                                               FontStyle="Italic" Background="#1E88E5" />
             </chart:PolarLineSeries.DataLabelSettings>
           <chart:PolarLineSeries />
       </chart:SfPolarChart>
        SfPolarChart chart = new SfPolarChart();
        ViewModel viewModel = new ViewModel();
    
        // Eliminated for simplicity
        PolarLineSeries series = new PolarLineSeries()
        {
           ItemsSource = viewModel.Data,
           XBindingPath = "XValue",
           YBindingPath = "YValue",
           ShowDataLabels = true,
        };
    
        series.DataLabelSettings = new PolarDataLabelSettings()
        {
            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 PolarDataLabelSettings 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:SfPolarChart>
    
          <!-- ... Eliminated for simplicity-->
          <chart:PolarLineSeries ItemsSource ="{Binding Data}"
                                 XBindingPath="XValue"
                                 YBindingPath="YValue"
                                 ShowDataLabels="True">
    
               <chart:PolarLineSeries.DataLabelSettings>
                    <chart:PolarDataLabelSettings ConnectorHeight = "40" ShowConnectorLine="True">
                        <chart:PolarDataLabelSettings.ConnectorLineStyle>
                            <Style TargetType = "Path">
                                <Setter Property="StrokeDashArray" Value="5,3"/>
                             </Style>
                         </chart:PolarDataLabelSettings.ConnectorLineStyle>
                    </chart:PolarDataLabelSettings>
               </chart:PolarLineSeries.DataLabelSettings>
           </chart:PolarLineSeries>
       </chart:SfPolarChart>
        SfPolarChart chart = new SfPolarChart();
        ViewModel viewModel = new ViewModel();
    
        // Eliminated for simplicity
        PolarLineSeries series = new PolarLineSeries()
        {
           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 PolarDataLabelSettings()
        {
            ShowConnectorLine = true,
            ConnectorHeight = 40,
            ConnectorLineStyle = connectorLineStyle,
        };
    
        chart.Series.Add(series);

    Constructors

    PolarDataLabelSettings()

    Initializes a new instance of the PolarDataLabelSettings class.

    Declaration
    public PolarDataLabelSettings()
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved