Data Label in .NET MAUI Chart

Data labels are used to display values related to a chart segment. Values from data point(x, y) or other custom properties from a data source can be displayed.

Each data label can be represented by the following:

  • Label - displays the segment label content at the (X, Y) point.
  • Connector line - used to connect the (X, Y) point and the label element.

Enable Data Label

The ShowDataLabels property of series is used to enable the data labels.

<chart:SfCartesianChart>
    . . .
    <chart:ColumnSeries ItemsSource="{Binding Data}" 
                        XBindingPath="Category"
                        YBindingPath="Value" ShowDataLabels="True">
        </chart:ColumnSeries>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();
. . .
ColumnSeries series = new ColumnSeries()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "Category",
    YBindingPath = "Value",
    ShowDataLabels = true
};

chart.Series.Add(series);

Data labels can be customized by using the DataLabelSettings property of chart series. For customizing, need to create an instance of CartesianDataLabelSettings and set to the DataLabelSettings property. Following properties are used to customize the data labels which are available in CartesianDataLabelSettings.

  • BarAlignment - Gets or sets the data label alignment top, middle or bottom.
  • LabelPlacement - Gets or sets the data label position inside, outside or default.
  • LabelStyle - Gets or sets the options for customizing the data labels.
  • UseSeriesPalette - Gets or sets a value indicating whether the data label should reflect the series interior.

Data label in MAUI chart

Data Label Alignment

The alignment of data labels inside the series is defined by using the BarAlignment property.

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

NOTE

This behavior varies based on the chart series type.

<chart:SfCartesianChart>
    . . .
    <chart:ColumnSeries ShowDataLabels="True">
        <chart:ColumnSeries.DataLabelSettings>
            <chart:CartesianDataLabelSettings BarAlignment="Middle"/>
        </chart:ColumnSeries.DataLabelSettings>
    </chart:ColumnSeries>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();
ColumnSeries series = new ColumnSeries();
. . .
series.DataLabelSettings = new CartesianDataLabelSettings()
{
    BarAlignment = DataLabelAlignment.Middle,
};

chart.Series.Add(series);

Data label alignment in MAUI chart

LabelPlacement

Other than the above alignment options, Chart providing additional customization option to position the data labels.

The LabelPlacement property is used to position the data labels at Center, Inner and Outer position of the actual data point position. By default, labels are positioned based on the series types for better readability.

Applying Series Brush

UseSeriesPalette property is used to set the interior of the series to the data marker background.

<chart:SfCartesianChart>
    . . .
    <chart:ColumnSeries ShowDataLabels="True">
        <chart:ColumnSeries.DataLabelSettings>
            <chart:CartesianDataLabelSettings  UseSeriesPalette="False"/>
        </chart:ColumnSeries.DataLabelSettings>
    </chart:ColumnSeries>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();
ColumnSeries series = new ColumnSeries();
. . .
series.DataLabelSettings = new CartesianDataLabelSettings()
{
    UseSeriesPalette = false,
};

chart.Series.Add(series);

Applying series interior for data label in MAUI chart