How to control the visibility of all series with a single legend item in .NET MAUI Cartesian Charts?

This article explores two methods for controlling the visibility of all series in a .NET MAUI Cartesian Chart using a single legend item. We will discuss two approaches: binding series visibility or utilizing a ViewModel property.

Step 1: Initialize the ChartLegend and set the ToggleSeriesVisibility property to true to control the series visibility by tapping the legend item.

[XAML]

<chart:SfCartesianChart.Legend>
    <chart:ChartLegend ToggleSeriesVisibility="True"/>
</chart:SfCartesianChart.Legend>

Step 2: Enable the legend for the first series by setting the IsVisibleOnLegend to True. For the remaining series, set it to False.

[XAML]

<chart:SfCartesianChart>
. . .
    <chart:ColumnSeries x:Name="series1" ItemsSource="{Binding Data1}" 
                        IsVisibleOnLegend="True"
                        XBindingPath="XValue" 
                        YBindingPath="YValue"/>

    <chart:ColumnSeries ItemsSource="{Binding Data2}"
                        IsVisibleOnLegend="False"
                        XBindingPath="XValue" 
                        YBindingPath="YValue"/>

    <chart:ColumnSeries ItemsSource="{Binding Data3}" 
                        IsVisibleOnLegend="False"
                        XBindingPath="XValue" 
                        YBindingPath="YValue" />
    
</chart:SfCartesianChart>

Step 3: Control the series visibility by using any one of the following methods:

Method 1:
Binding the IsVisible property of the first series to the rest of the series as shown in the following code sample.

[XAML]

<chart:SfCartesianChart>
. . .
    <chart:ColumnSeries x:Name="series1" ItemsSource="{Binding Data1}" 
                        IsVisibleOnLegend="True"
                        XBindingPath="XValue" 
                        YBindingPath="YValue"
                        Label="Series1"/>

    <chart:ColumnSeries ItemsSource="{Binding Data2}"
                        IsVisible="{Binding Path=IsVisible, Source={x:Reference series1}}"
                        IsVisibleOnLegend="False"
                        XBindingPath="XValue" 
                        YBindingPath="YValue"
                        Label="Series2"/>

    <chart:ColumnSeries ItemsSource="{Binding Data3}" 
                        IsVisible="{Binding Path=IsVisible, Source={x:Reference series1}}"
                        IsVisibleOnLegend="False"
                        XBindingPath="XValue" 
                        YBindingPath="YValue" 
                        Label="Series3"/>
                      
</chart:SfCartesianChart>

Method 2:
Without binding, you can also control all the series visibility by binding the same Boolean property (the property that holds the state of series visibility) from the view model to all the associated series IsVisible property. When the primary series legend is clicked, all associated series visibility is also collapsed. The following code sample shows how to toggle multiple series with a single legend item.

[XAML]

<chart:SfCartesianChart>
. . .
    <chart:ColumnSeries x:Name="series1" 
                        ItemsSource="{Binding Data1}" 
                        IsVisible="{Binding IsSeriesVisible, Mode=TwoWay}"
                        IsVisibleOnLegend="True"
                        XBindingPath="XValue" 
                        YBindingPath="YValue"
                        Label="Series1"/>

    <chart:ColumnSeries ItemsSource="{Binding Data2}"
                        IsVisible="{Binding IsSeriesVisible}"
                        IsVisibleOnLegend="False"
                        XBindingPath="XValue" 
                        YBindingPath="YValue"
                        Label="Series2"/>

    <chart:ColumnSeries ItemsSource="{Binding Data3}" 
                        IsVisible="{Binding IsSeriesVisible}"
                        IsVisibleOnLegend="False"
                        XBindingPath="XValue" 
                        YBindingPath="YValue" 
                        Label="Series3"/>
                      
</chart:SfCartesianChart>

[C#]

public class ViewModel : INotifyPropertyChanged
{
    . . .
    private bool isSeriesVisible = true;

    public event PropertyChangedEventHandler PropertyChanged;

    public bool IsSeriesVisible
    {
        get { return isSeriesVisible; }
        set
        {
            isSeriesVisible = value;
            OnPropertyChanged(nameof(IsSeriesVisible));
        }
    }

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    . . .
}

Output

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to control the visibility of all series with a single legend item 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!