How to Toggle Series Visibility Using Legend in Live Blazor Chart?
This article explains how to dynamically toggle the visibility of chart series using the legend in a live-updating Blazor Chart.
Toggle series visibility via legend
You can manage series visibility by using the Visible property within the OnLegendClick event. By checking the args.LegendText value, you can identify which series was clicked and toggle its visibility accordingly.
To prevent live data updates from interfering with this interaction, introduce a boolean flag IsSkip. This flag temporarily disables data updates while the legend toggle is being processed, ensuring smooth and conflict-free chart behavior.
Code Example
<SfChart>
<ChartEvents OnLegendClick="LegendClick"></ChartEvents>
<ChartSeriesCollection>
<ChartSeries Visible="@seriesVisibility1" Name="CPU Usage1"></ChartSeries>
<ChartSeries Visible="@seriesVisibility2" Name="CPU Usage2"></ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code {
//Flag to skip data updates during legend toggle
public bool IsSkip { get; set; }
// Series visibility states
public bool seriesVisibility1 { get; set; } = true;
public bool seriesVisibility2 { get; set; } = true;
// Legend click event handler
public void LegendClick(LegendClickEventArgs args)
{
if (args != null)
{
IsSkip = true;
if (args.LegendText == "CPU Usage2")
{
seriesVisibility2 = !seriesVisibility2;
}
else
{
seriesVisibility1 = !seriesVisibility1;
}
IsSkip = false;
}
}
// Initialize chart with the first series hidden
protected override void OnInitialized()
{
seriesVisibility1 = !seriesVisibility1;
}
Random random = new Random();
// Live data update method
private void AddData(Object source, ElapsedEventArgs e)
{
if (liveChart == null || IsSkip)
return;
}
}
Output
Sample
Conclusion
I hope you enjoyed learning about how to toggle series visibility via legend in live Blazor Chart.
You can refer to our Blazor Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Blazor Chart Documentation to understand how to present and manipulate data.
For current customers, you can check out our Blazor components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Blazor Chart and other Blazor components.
If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!