Articles in this section
Category / Section

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

2 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));
        }
    }

 

Output

 

Before toggling the legend.
Before toggling the legend

After the legend is toggled.

After the legend is toggled.

See also

How to customize the legend Icon based on series appearance in WPF Chart

How to achieve the draggable legend in WPF Chart

How to wrap the text in the WPF Chart legend


 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied