How-to-control-the-visibility-of-all-series-with-a-single-legend-item-in-Cartesian-chart

This article will explain the step to control the visibility of all series with a single legend item in a Cartesian chart. Step 1: Initialize the ChartLegend and set the ToggleSeriesVisibility as true to control the series visibility.

[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" and "False" for the remaining series.

[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 the following solutions:

Solution 1 : Binding the IsVisible property of 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>

Solution 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. In this way, when the primary series legend is clicked, all the associated series visibility 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