Positioning Data Markers in WinUI Chart

14 Apr 20213 minutes to read

The positioning of data markers inside the series is defined using DataMarkerPosition property.

  • Top - Positions the data marker at the top edge point of a chart segment.
  • Bottom - Positions the data marker at the bottom edge point of a chart segment.
  • TopAndBottom - Positions the data marker at the center 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.

<syncfusion:ChartDataMarker ShowMarker="True" DataMarkerPosition="TopAndBottom" MarkerInterior="#1E88E5" MarkerType="Ellipse">
</syncfusion:ChartDataMarker>
ColumnSeries series = new ColumnSeries();
ChartDataMarker datamarker = new ChartDataMarker()
{
    ShowMarker = true,
    MarkerType = ChartSymbol.Ellipse,
    MarkerInterior = "#1E88E5",
    DataMarkerPosition = DataMarkerPosition.TopAndBottom
};
series.DataMarker = datamarker;

TopAndBottom DataMarker

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

Label Position

Other than the above positioning options, Chart providing additional customization option to position the data markers smartly based on series types using LabelPosition property.

The following are the values for this property:

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

<chart:ChartDataMarker ShowLabel="True" LabelPosition="Center"/>
ChartDataMarker datamarker = new ChartDataMarker()
{
    ShowLabel = true,
    LabelPosition = DataMarkerLabelPosition.Center
};
Column Spline
center Column center Series

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

<chart:ChartDataMarker ShowLabel="True" LabelPosition="Inner"/>
ChartDataMarker datamarker = new ChartDataMarker()
{
    ShowLabel = true,
    LabelPosition = DataMarkerLabelPosition.Inner
};
Column Spline
Inner Column Inner Series

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

<chart:ChartDataMarker ShowLabel="True" LabelPosition="Outer"/>
ChartDataMarker datamarker = new ChartDataMarker()
{
    ShowLabel = true,
    LabelPosition = DataMarkerLabelPosition.Outer
};
Column Spline
Outer Column Outer Series