We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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


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


 

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile