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