Class CartesianDataLabelSettings

The CartesianDataLabelSettings class is used to customize the appearance of cartesian series data labels.

Inheritance

System.Object

ChartDataLabelSettings

CartesianDataLabelSettings

Inherited Members

ChartDataLabelSettings.Background

ChartDataLabelSettings.BackgroundProperty

ChartDataLabelSettings.BorderBrush

ChartDataLabelSettings.BorderBrushProperty

ChartDataLabelSettings.BorderThickness

ChartDataLabelSettings.BorderThicknessProperty

ChartDataLabelSettings.ConnectorHeight

ChartDataLabelSettings.ConnectorHeightProperty

ChartDataLabelSettings.ConnectorLineStyle

ChartDataLabelSettings.ConnectorLineStyleProperty

ChartDataLabelSettings.ConnectorRotation

ChartDataLabelSettings.ConnectorRotationProperty

ChartDataLabelSettings.ContentTemplate

ChartDataLabelSettings.ContentTemplateProperty

ChartDataLabelSettings.Context

ChartDataLabelSettings.ContextProperty

ChartDataLabelSettings.FontFamily

ChartDataLabelSettings.FontFamilyProperty

ChartDataLabelSettings.FontSize

ChartDataLabelSettings.FontSizeProperty

ChartDataLabelSettings.FontStyle

ChartDataLabelSettings.FontStyleProperty

ChartDataLabelSettings.Foreground

ChartDataLabelSettings.ForegroundProperty

ChartDataLabelSettings.Format

ChartDataLabelSettings.FormatProperty

ChartDataLabelSettings.HighlightOnSelection

ChartDataLabelSettings.HighlightOnSelectionProperty

ChartDataLabelSettings.HorizontalAlignment

ChartDataLabelSettings.HorizontalAlignmentProperty

ChartDataLabelSettings.Margin

ChartDataLabelSettings.MarginProperty

ChartDataLabelSettings.Rotation

ChartDataLabelSettings.RotationProperty

ChartDataLabelSettings.Series

ChartDataLabelSettings.ShowConnectorLine

ChartDataLabelSettings.UseSeriesPalette

ChartDataLabelSettings.UseSeriesPaletteProperty

ChartDataLabelSettings.VerticalAlignment

ChartDataLabelSettings.VerticalAlignmentProperty

Namespace: Syncfusion.UI.Xaml.Charts

Assembly: Syncfusion.Chart.WinUI.dll

Syntax

public sealed class CartesianDataLabelSettings : ChartDataLabelSettings

Remarks

To customize data labels, create an instance of CartesianDataLabelSettings class, and set it to the DataLabelSettings property of a cartesian series.

ShowDataLabels

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

Xaml
C#

   <chart:SfCartesianChart>

      <!-- ... Eliminated for simplicity-->
      <chart:LineSeries ItemsSource ="{Binding Data}"
                        XBindingPath="XValue" 
                        YBindingPath="YValue"
                        ShowDataLabels="True"/>

   </chart:SfCartesianChart>

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

    // Eliminated for simplicity
    LineSeries 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 CartesianDataLabelSettings.

Xaml

   <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->
      <chart:LineSeries ItemsSource ="{Binding Data}" 
                        XBindingPath="XValue"
                        YBindingPath="YValue"
                        ShowDataLabels="True">

           <chart:LineSeries.DataLabelSettings>
               <chart:CartesianDataLabelSettings>
                   <chart:CartesianDataLabelSettings.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:CartesianDataLabelSettings.ContentTemplate>
               </chart:CartesianDataLabelSettings>
           </chart:LineSeries.DataLabelSettings>
       </chart:LineSeries>
   </chart:SfCartesianChart>

Context

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

Xaml
C#

   <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->
      <chart:LineSeries ItemsSource ="{Binding Data}" 
                        XBindingPath="XValue" 
                        YBindingPath="YValue"
                        ShowDataLabels="True">
         <chart:LineSeries.DataLabelSettings>
             <chart:CartesianDataLabelSettings Context="Percentage" />
         </chart:LineSeries.DataLabelSettings>
      <chart:LineSeries />
   </chart:SfCartesianChart>

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

    // Eliminated for simplicity
    LineSeries series = new LineSeries()
    {
       ItemsSource = viewModel.Data,
       XBindingPath = "XValue",
       YBindingPath = "YValue",
       ShowDataLabels = true
    };

    series.DataLabelSettings = new CartesianDataLabelSettings()
    {
        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:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->
      <chart:LineSeries ItemsSource ="{Binding Data}" 
                        XBindingPath="XValue" 
                        YBindingPath="YValue"
                       ShowDataLabels="True">
         <chart:LineSeries.DataLabelSettings>
             <chart:CartesianDataLabelSettings Foreground="White" FontSize="11" 
                                               FontFamily="Calibri" BorderBrush="Black" BorderThickness="1" Margin="1" 
                                               FontStyle="Italic" Background="#1E88E5" />
         </chart:LineSeries.DataLabelSettings>
       <chart:LineSeries />
   </chart:SfCartesianChart>

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

    // Eliminated for simplicity
    LineSeries series = new LineSeries()
    {
       ItemsSource = viewModel.Data,
       XBindingPath = "XValue",
       YBindingPath = "YValue",
       ShowDataLabels = true,
    };

    series.DataLabelSettings = new CartesianDataLabelSettings()
    {
        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 property of CartesianDataLabelSettings 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:SfCartesianChart>

      <!-- ... Eliminated for simplicity-->
      <chart:LineSeries ItemsSource ="{Binding Data}"
                        XBindingPath="XValue"
                        YBindingPath="YValue"
                        ShowDataLabels="True">

           <chart:LineSeries.DataLabelSettings>
                <chart:CartesianDataLabelSettings ConnectorHeight = "40" ShowConnectorLine="True">
                    <chart:CartesianDataLabelSettings.ConnectorLineStyle>
                        <Style TargetType = "Path">
                            <Setter Property="StrokeDashArray" Value="5,3"/>
                         </Style>
                     </chart:CartesianDataLabelSettings.ConnectorLineStyle>
                </chart:CartesianDataLabelSettings>
           </chart:LineSeries.DataLabelSettings>
       </chart:LineSeries>
   </chart:SfCartesianChart>

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

    // Eliminated for simplicity
    LineSeries series = new LineSeries()
    {
       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 CartesianDataLabelSettings()
    {
        ShowConnectorLine = true,
        ConnectorHeight = 40,
        ConnectorLineStyle = connectorLineStyle,
    };

    chart.Series.Add(series);

Constructors

CartesianDataLabelSettings()

Initializes a new instance of the CartesianDataLabelSettings class.

Declaration

public CartesianDataLabelSettings()

Fields

BarLabelAlignmentProperty

Identifies the BarLabelAlignment dependency property.

Declaration

public static readonly DependencyProperty BarLabelAlignmentProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for `SideBySideSeriesPosition` 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

BarLabelAlignment

Gets or sets the value for a bar chart data label's alignment.

Declaration

public BarLabelAlignment BarLabelAlignment { get; set; }

Property Value

Type	Description
BarLabelAlignment	It accepts BarLabelAlignment values and has a default value of Top.

Remarks

CartesianDataLabelSettings also allows you to define label alignment with the HorizontalAlignment and VerticalAlignment properties.

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:ColumnSeries ItemsSource="{Binding Data}"
                             XBindingPath="XValue"
                             YBindingPath="YValue"
                             ShowDataLabels="True">
               <chart:ColumnSeries.DataLabelSettings>
                   <chart:CartesianDataLabelSettings BarLabelAlignment="Middle" />
               </chart:ColumnSeries.DataLabelSettings>
             </chart:ColumnSeries>

    </chart:SfCartesianChart>

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

    // Eliminated for simplicity
    var dataLabelSettings = new CartesianDataLabelSettings()
    {
        BarLabelAlignment = BarLabelAlignment.Middle
    };
    ColumnSeries series = new ColumnSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          ShowDataLabels = true,
          DataLabelSettings = dataLabelSettings,
    };

    chart.Series.Add(series);

Position

Gets or sets the value for the data label's position.

Declaration

public DataLabelPosition Position { get; set; }

Property Value

Type	Description
DataLabelPosition	It accepts DataLabelPosition values and its default value is Default.

Remarks

It is used to position the data labels at the center, inner, and outer positions of the actual data point position.

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:ColumnSeries ItemsSource="{Binding Data}"
                             XBindingPath="XValue"
                             YBindingPath="YValue"
                             ShowDataLabels="True">
               <chart:ColumnSeries.DataLabelSettings>
                   <chart:CartesianDataLabelSettings Position="Outer" />
               </chart:ColumnSeries.DataLabelSettings>
             </chart:ColumnSeries>

    </chart:SfCartesianChart>

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

    // Eliminated for simplicity
    var dataLabelSettings = new CartesianDataLabelSettings()
    {
        Position = DataLabelPosition.Outer
    };
    ColumnSeries series = new ColumnSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          ShowDataLabels = true,
          DataLabelSettings = dataLabelSettings,
    };

    chart.Series.Add(series);