How to collapse the visibility of specific data labels in .NET MAUI Cartesian Charts?

Collapsing the visibility of specific data labels in .NET MAUI Cartesian charts can be a useful way to improve your visualization and focus on the most important data points.
This article will explain the steps to hide or collapse specific data labels in a Cartesian chart.

Step 1: Define a data label template for the series.

[XAML]

<DataTemplate x:Key="labelTemplate">
    <HorizontalStackLayout HorizontalOptions="Center">
        <Image Source="greenarrow.png" HeightRequest="15" WidthRequest="15" />
        <Label Text="{Binding Item.Value}" VerticalOptions="Center"/>
        <Label Text="%" VerticalOptions="Center"/>
    </HorizontalStackLayout>
</DataTemplate>

Step 2: Create a value to visibility converter to control the visibility of the data label based on the Y-value. For example, in the following converter, we have collapsed the visibility of the data label for values less than 50.

[C#]

public class VisibilityConverter : IValueConverter
{
    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        if (!(value is double labelValue))
            return null;

        if (labelValue < 50)
            return false;
        return true;
    }

    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        return value;
    }
}

Step 3: To control the visibility, bind the converter to the DataTemplate layout’s IsVisible property.

[XAML]

<chart:SfCartesianChart.Resources>
    <model:VisibilityConverter x:Key="visibilityConverter"/>
    <DataTemplate x:Key="labelTemplate">
        <HorizontalStackLayout HorizontalOptions="Center" IsVisible="{Binding Item.Value, Converter={StaticResource visibilityConverter}}">
            <Image Source="greenarrow.png" HeightRequest="15" WidthRequest="15" />
            <Label Text="{Binding Item.Value}" VerticalOptions="Center"/>
            <Label Text="%" VerticalOptions="Center"/>
        </HorizontalStackLayout>
    </DataTemplate>
</chart:SfCartesianChart.Resources>

Step 4: Set the defined DataTemplate to the LabelTemplate property of ColumnSeries.

[XAML]

<chart:SfCartesianChart x:Name="Chart">
. . .
    <chart:SfCartesianChart.Series>
        <chart:ColumnSeries ItemsSource="{Binding Data}" 
                            LabelTemplate="{StaticResource labelTemplate}"
                            ShowDataLabels="True"
                            XBindingPath="Year" 
                            YBindingPath="Value">
            <chart:ColumnSeries.DataLabelSettings>
                <chart:CartesianDataLabelSettings LabelPlacement="Outer"/>
            </chart:ColumnSeries.DataLabelSettings>
        </chart:ColumnSeries>
        
    </chart:SfCartesianChart.Series>
</chart:SfCartesianChart>

Output

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to collapse the visibility of specific data labels in .NET MAUI Cartesian Charts.

Refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. You can also 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!