How to control the visibility of all series with a single legend item in WPF Charts

7 mins read

This article explains how to control the visibility of series under single legend item in WPF Syncfusion SfChart.

By default, each legend items helps us to identity the series in chart. We can change series visibility by tapping legend item by enabling ToggleSeriesVisibility property as shown in below.

Default legend item

You can control the multiple series visibility with a single legend item by the following steps.

Step 1: Initialize the ChartLegend and set the ToggleSeriesVisibility as true to control the series visibility.

[XAML]

<syncfusion:SfChart.Legend>
       <syncfusion:ChartLegend ToggleSeriesVisibility="True"/>
</syncfusion:SfChart.Legend>

Step 2: Enable the legend for the first series by setting the VisibilityOnLegend to visible and collapsed for the remaining series.

[XAML]

<syncfusion:LineSeries VisibilityOnLegend="Visible" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" Label="Series1" />
<syncfusion:LineSeries VisibilityOnLegend="Collapsed" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1" />
<syncfusion:LineSeries VisibilityOnLegend="Collapsed" ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2" />

[C#]

LineSeries lineSeries1 = new LineSeries()
{ 
       ……
       VisibilityOnLegend = Visibility.Visible
};
 
LineSeries lineSeries2 = new LineSeries()
{
       ……
       VisibilityOnLegend = Visibility.Collapsed
};
 
LineSeries lineSeries3 = new LineSeries()
{
       ……
       VisibilityOnLegend = Visibility.Collapsed
};

Step 3: Control the series visibility by using the following solutions:

Solution 1:

Element binding the IsSeriesVisible property of first series, to the rest of the series as shown in the following code sample.

[XAML]

<syncfusion:LineSeries x:Name="series1" VisibilityOnLegend="Visible" ItemsSource="{Binding Data}" XBindingPath="XValue" 
YBindingPath="YValue" Label=" LineSeries" />
<syncfusion:LineSeries IsSeriesVisible="{Binding ElementName=series1, Path=IsSeriesVisible}" VisibilityOnLegend="Collapsed" 
ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1" />
<syncfusion:LineSeries IsSeriesVisible="{Binding ElementName=series1, Path=IsSeriesVisible}" VisibilityOnLegend="Collapsed" 
ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2" />

[C#]

var binding = new Binding("IsSeriesVisible")
{
      Source = lineSeries1
};
 
lineSeries2.SetBinding(LineSeries.IsSeriesVisibleProperty, binding);
lineSeries3.SetBinding(LineSeries.IsSeriesVisibleProperty, binding);

Solution 2:

Without element 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 IsSeriesVisible 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 in WPF Chart using the MVVM pattern.

[XAML]

<syncfusion:LineSeries x:Name="series1" IsSeriesVisible="{Binding IsSeriesVisible, Mode=TwoWay}" VisibilityOnLegend="Visible" 
ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" Label="LineSeries" />
<syncfusion:LineSeries IsSeriesVisible="{Binding IsSeriesVisible}" VisibilityOnLegend="Collapsed" ItemsSource="{Binding Data}" 
XBindingPath="XValue" YBindingPath="YValue1" Label="Series2" />
<syncfusion:LineSeries IsSeriesVisible="{Binding IsSeriesVisible}" VisibilityOnLegend="Collapsed" ItemsSource="{Binding Data}" 
XBindingPath="XValue" YBindingPath="YValue2" Label="Series3" />

[C#]

 public class ViewModel : INotifyPropertyChanged
 {
        private bool isSeriesVisible = true;
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        public bool IsSeriesVisible
        {
            get { return isSeriesVisible; }
            set
            {
                isSeriesVisible = value;
                OnPropertyChanged();
            }
        }
 
        private void OnPropertyChanged([CallerMemberName] String propertyName = "")
        {
            if (PropertyChanged != null)
                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }