Positioning Data Markers in WinUI Chart

24 May 20223 minutes to read

The positioning of data markers is defined by using the BarLabelAlignment property.

• Top - Positions the data marker at the top edge point of a chart segment.
• Middle - Positions the data marker at the center point of a chart segment.
• Bottom - Positions the data marker at the bottom edge point of a chart segment.

NOTE

This behavior varies based on the chart series type.

The following code example explains how to position data markers in the middle of the segment.

XAML

<chart:SfChart>
. . .
<chart:ColumnSeries ShowDataLabels="True">
    <chart:ColumnSeries.DataLabelSettings>
        <chart:CartesianDataLabelSettings BarLabelAlignment="Middle"/>
    </chart:ColumnSeries.DataLabelSettings>
</chart:ColumnSeries>
</chart:SfChart>

C#

SfChart chart = new SfChart();
ColumnSeries series = new ColumnSeries();
. . .
series.DataLabelSettings = new CartesianDataLabelSettings()
{
    BarLabelAlignment = BarLabelAlignment.Middle,
};

chart.Series.Add(series);

Also, you can define the label alignment using the HorizontalAlignment and VerticalAlignment properties.

Position

Other than the above alignment options, chart provides an additional customization option to position the data markers smartly based on series types using the Position property. By default, labels are positioned based on the series types for better readability.

The following are the values for this property:

• Default
• Auto
• Inner
• Outer
• Center

The following code sample illustrates the center position of data marker labels.

XAML

<chart:CartesianDataLabelSettings Position="Center" />

C#

CartesianDataLabelSettings dataLabel = new CartesianDataLabelSettings()
{
    Position = DataLabelPosition.Center
};

Column	Spline

The following code sample illustrates the inner position of data marker labels.

XAML

<chart:CartesianDataLabelSettings Position="Inner" />

C#

CartesianDataLabelSettings dataLabel = new CartesianDataLabelSettings()
{
    Position = DataLabelPosition.Inner
};

Column	Spline

The following code sample illustrates the outer position of data marker labels.

XAML

<chart:CartesianDataLabelSettings Position="Outer" />

C#

CartesianDataLabelSettings dataLabel = new CartesianDataLabelSettings()
{
    Position = DataLabelPosition.Outer
};

Column	Spline