How-to-collapse-the-visibility-of-specific-data-label-in-.NET-MAUI-Cartesian-chart

This article in the Syncfusion Knowledge Base explains how to collapse the visibility of specific data label in .NET MAUI Cartesian chart

Collapsing the visibility of specific data labels in Cartesian charts can be a useful way to improve your visualisation and focus on the most important data points. This article will explain the step 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 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