Data Labels in .NET MAUI Polar Chart

15 Jul 20267 minutes to read

Data labels are used to display values related to a chart segment. Values from a 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.

NOTE

Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the SfPolarChart control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.

Enable Data Labels

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

XAML

<chart:SfPolarChart>
    <!-- code omitted for brevity -->
    <chart:PolarLineSeries ItemsSource = "{Binding PlantDetails}"
                           XBindingPath = "Direction"
                           YBindingPath = "Tree" 
                           ShowDataLabels = "True"/>
</chart:SfPolarChart>

C#

SfPolarChart chart = new SfPolarChart();
// code omitted for brevity
PolarLineSeries series = new PolarLineSeries()
{
    ItemsSource = PlantViewModel.PlantDetails,
    XBindingPath = "Direction",
    YBindingPath = "Tree",
    ShowDataLabels = true
};

chart.Series.Add(series);
this.Content = chart;

Data labels can be customized using the DataLabelSettings property of chart series. To customize them, you need to create an instance of PolarDataLabelSettings and set it to the DataLabelSettings property. The following properties available in PolarDataLabelSettings can be used to customize the data labels.

• 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.

Applying Series Brush

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

XAML

<chart:SfPolarChart>
    <!-- code omitted for brevity -->
    <chart:PolarLineSeries ShowDataLabels = "True">
        <chart:PolarLineSeries.DataLabelSettings>
            <chart:PolarDataLabelSettings UseSeriesPalette = "False"/>
        </chart:PolarLineSeries.DataLabelSettings>
    </chart:PolarLineSeries>
</chart:SfPolarChart>

C#

SfPolarChart chart = new SfPolarChart();
PolarLineSeries series = new PolarLineSeries();
series.ShowDataLabels = true;
// code omitted for brevity
series.DataLabelSettings = new PolarDataLabelSettings()
{
    UseSeriesPalette = false
};

chart.Series.Add(series);
this.Content = chart;

Formatting Label Context

Customize the label content by using the LabelContext property. The following two options are supported:

• Percentage - Displays the percentage value of the corresponding data point Y value

• YValue - Displays the corresponding Y value

XAML

<chart:SfPolarChart>
    <!-- code omitted for brevity -->
    <chart:PolarAreaSeries ItemsSource = "{Binding PlantDetails}"
                           XBindingPath = "Direction"
                           YBindingPath = "Tree"
                           ShowDataLabels = "True"
                           LabelContext = "Percentage"/>
</chart:SfPolarChart>

C#

SfPolarChart chart = new SfPolarChart();
// code omitted for brevity
PolarAreaSeries series = new PolarAreaSeries()
{
    ItemsSource = new PlantViewModel().PlantDetails,
    XBindingPath = "Direction",
    YBindingPath = "Tree",
    ShowDataLabels = true,
    LabelContext = LabelContext.Percentage
};

chart.Series.Add(series);
this.Content = chart;

LabelTemplate

The SfPolarChart provides support to customize the appearance of the data labels using the LabelTemplate property.

XAML

<chart:SfPolarChart >
    <chart:SfPolarChart.Resources>
        <DataTemplate x:Key = "labelTemplate">
            <HorizontalStackLayout Spacing = "5">
                <Label Text = "{Binding Item.Values}" VerticalOptions = "Center" FontSize = "15"/>
                <Image Source = "arrow.png" WidthRequest = "15" HeightRequest = "15"/>
            </HorizontalStackLayout>
        </DataTemplate>
    </chart:SfPolarChart.Resources>
    <!-- code omitted for brevity -->
    <chart:PolarAreaSeries ItemsSource = "{Binding Data}"
                           XBindingPath = "Category"
                           YBindingPath = "Values"
                           ShowDataLabels = "True"
                           LabelTemplate = "{StaticResource labelTemplate}"/>
</chart:SfPolarChart>

C#

SfPolarChart chart = new SfPolarChart();
// code omitted for brevity
PolarAreaSeries series = new PolarAreaSeries();
series.ItemsSource = new ViewModel().Data;
series.XBindingPath = "Category";
series.YBindingPath = "Values";
series.ShowDataLabels = true;

DataTemplate labelTemplate = new DataTemplate(() =>
{
    var image = new Image()
    {
        Source = "arrow.png",
        WidthRequest = 15,
        HeightRequest = 15
    };
    
    return image;
});

series.LabelTemplate = labelTemplate;
chart.Series.Add(series);
this.Content = chart;