How to control visibility of all series with single legend item in WPF SfCharts?
This article explains how to control the visibility of series under single legend item in our WPF SfChart featuretour page.
By default, each legend items helps us to identity the series in chart. We can change series visibility by tapping legend item, which is enabled by setting the ToggleSeriesVisibility property, as shown below.
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:
Soultion 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);
Soultion 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.
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
Conclusion
I hope you enjoyed learning how to control visibility of all series with single item in WPF SfCharts.
You can refer to our WPF Chart feature tour page know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart Examples to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
