Articles in this section
Category / Section

How to Toggle Series Visibility Using Legend in Live Blazor Chart?

3 mins read

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

image.png

Sample

Live Sample Link

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!

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