How to Show Data Labels for Selected Points in MAUI Cartesian Chart?

In this article, we demonstrate how to display data labels at specific data points in the .NET MAUI Chart (SfCartesianChart). This helps reduce visual clutter when there are many points, improving the UI, and allows you to show labels based on certain conditions or scenarios. Learn step-by-step instructions and gain insights to implement this effectively.

Step 1: Add a “ShowLabel” property

The most effective way to control label visibility is by linking each data point to a property that governs whether its label should appear.

Why it matters?:

When your data includes a flag like ShowLabel, the UI can easily decide which labels to show, making your chart cleaner, more focused, and tailored to highlight what’s important.

[C#]

public class ChartData
{
    public string Category { get; set; }
    public double Value { get; set; }
    public bool ShowLabel { get; set; }

    public ChartData(string category, double value, bool showLabel)
    {
        Category = category;
        Value = value;
        ShowLabel = showLabel;
    }
}

Step 2: Assign the Logic (Business Rule)

When you build your data source, set ShowLabel based on your scenario:

• Show labels only if the value is above a set threshold,
• Or, only for certain indices, special markers, etc.

[C#]

public ObservableCollection<ChartData> Data { get; set; } = new();
public double Threshold { get; set; } = 75;

public SensorDataViewModel()
{
    var now = DateTime.Now;
    for (int i = 60; i >= 1; i--)
    {
        var time = now.AddSeconds(-i).ToString("HH:mm:ss");
        var value = NextValue(50, 100);
        var show = value >= Threshold; // Only show label if value is above threshold
        Data.Add(new ChartData(time, value, show));
    }
}

Step 3: Bind Your Data to the Chart

Bind the ItemsSource, XBindingPath, and YBindingPath so the chart “knows” what to display and set ShowDataLabels to True to enable the data labels.

XAML

<chart:LineSeries
    ItemsSource="{Binding Data}"
    XBindingPath="Category"
    YBindingPath="Value"
    ShowDataLabels="True">
    <!-- We'll add the template next -->
</chart:LineSeries>

Step 4: Use a LabelTemplate with Conditional Visibility

The chart’s LabelTemplate exposes the data point with the Item property. We use data binding to set the label’s IsVisible based on ShowLabel.

XAML

<chart:LineSeries.LabelTemplate>
    <DataTemplate>
        <Border 
           Padding="8,4"
           BackgroundColor="#2563EB"
           StrokeShape="RoundRectangle 6"
           IsVisible="{Binding Item.ShowLabel}">
            <Label
                Text="{Binding Item.Value, StringFormat='Value: {0:0.0}'}"
                FontSize="11"
                TextColor="White" />
        </Border>
    </DataTemplate>
</chart:LineSeries.LabelTemplate>

Why this is powerful:

• The UI is always in sync with your logic.
• You can quickly change your rule (above threshold, only outliers, custom conditions, etc.).
• For large datasets, the chart stays easy to read.

Output:

For more details, please refer to the project on GitHub sample.

Conclusion

I hope you enjoyed learning how to display data labels for specific data points in the .NET MAUI Chart (SfCartesianChart).

You can refer to our MAUI Cartesian Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Chart documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!