Positioning Data Markers in WinUI Chart

8 Jul 20213 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 the positioning of data markers in the middle of the segment.

<chart:SfChart>
. . .
<chart:ColumnSeries ShowDataLabels="True">
    <chart:ColumnSeries.DataLabelSettings>
        <chart:CartesianDataLabelSettings BarLabelAlignment="Middle"/>
    </chart:ColumnSeries.DataLabelSettings>
</chart:ColumnSeries>
</chart:SfChart>
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 HorizontalAlignment and VerticalAlignment properties.

Position

Other than the above alignment options, Chart providing 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:

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

<chart:CartesianDataLabelSettings Position="Center" />
CartesianDataLabelSettings dataLabel = new CartesianDataLabelSettings()
{
    Position = DataLabelPosition.Center
};
Column Spline
Data label center in Column Data label center in Spline

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

<chart:CartesianDataLabelSettings Position="Inner" />
CartesianDataLabelSettings dataLabel = new CartesianDataLabelSettings()
{
    Position = DataLabelPosition.Inner
};
Column Spline
Data label inner in Column Data label inner in Spline

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

<chart:CartesianDataLabelSettings Position="Outer" />
CartesianDataLabelSettings dataLabel = new CartesianDataLabelSettings()
{
    Position = DataLabelPosition.Outer
};
Column Spline
Data label outer in Column Data label outer in Spline