Class CartesianDataLabelSettings

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

Inheritance

System.Object

ChartDataLabelSettings

CartesianDataLabelSettings

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