How to Toggle Series Visibility During Live Updates in Blazor Charts?

This article explains how to toggle series visibility during live updates in Blazor Charts.

Toggle Series Visibility Using a Checkbox During Live Updates

Blazor Charts provides an option to toggle the visibility of series using a checkbox during live updates. This can be accomplished by utilizing the Visible property in ChartSeries to control the series’ visibility. You can use a CheckBox component to show or hide the series during live data updates.

In this code snippet, the property of ChartSeries is employed to manage the visibility of different data series in the chart. Two CheckBox components are used to toggle the visibility of the CPU usage series. When a checkbox is checked or unchecked, it updates the corresponding SeriesVisibility property, which in turn shows or hides the associated series on the chart.

The chart is designed to display CPU usage data in real-time. A Timer is utilized to periodically update the chart with new data points, ensuring that the displayed data remains current. The CheckBox components allow users to control which series are visible during these live updates.

Index.razor

@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons
@using System.Collections.ObjectModel
@using System.Timers

<div class="row">
   <div class="col-md-2">
       <SfCheckBox Label="CPU Usage 1" @onchange="OnChange1" @bind-Checked="IsChecked1"></SfCheckBox> <br /> <br />
       <SfCheckBox Label="CPU Usage 2" @onchange="OnChange2" @bind-Checked="IsChecked2"></SfCheckBox>
   </div>
   <div class="col-md-10" style="height:80%">
       <SfChart @ref="liveChart" Title="CPU Usage">
           <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="mm:ss" Title="Time (s)" />
           <ChartPrimaryYAxis Minimum="0" Interval="20" Maximum="100" LabelFormat="{value}%" />
           <ChartSeriesCollection>
               <ChartSeries Visible="SeriesVisibility1" Type="ChartSeriesType.Line" Width="2" DataSource="@DataPoints"
                            XName="@nameof(ChartDataPoint.Time)" YName="@nameof(ChartDataPoint.CPU_Usage1)">
                   <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>
               </ChartSeries>
               <ChartSeries Visible="SeriesVisibility2" Type="ChartSeriesType.Line" Width="2" DataSource="@DataPoints"
                            XName="@nameof(ChartDataPoint.Time)" YName="@nameof(ChartDataPoint.CPU_Usage2)">
                   <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>
               </ChartSeries>
           </ChartSeriesCollection>
       </SfChart>
   </div>
</div>


@code{
   private bool IsChecked1 = true;
   private bool IsChecked2 = true;
   public bool SeriesVisibility1 { get; set; } = true;
   public bool SeriesVisibility2 { get; set; } = true;
   
   private void OnChange1(Microsoft.AspNetCore.Components.ChangeEventArgs args)
   {
       IsChecked1 = Convert.ToBoolean(args.Value);
       SeriesVisibility1 = IsChecked1;
       StateHasChanged();
   }
   
   private void OnChange2(Microsoft.AspNetCore.Components.ChangeEventArgs args)
   {
       IsChecked2 = Convert.ToBoolean(args.Value);
       SeriesVisibility2 = IsChecked2;
       StateHasChanged();
   }
   
   private static Timer timer;
   private SfChart liveChart;
   private double dataLength = 100;
   private Random randomNum = new Random();
   public ObservableCollection<ChartDataPoint> DataPoints;
   
   protected override void OnInitialized()
   {
       // Provide the chart with initial data during page load.
       DataPoints = new ObservableCollection<ChartDataPoint>();
       for (int i = 0; i < dataLength; i++)
           DataPoints.Add(new ChartDataPoint
               {
                   Time = DateTime.Now.AddSeconds(i + 10),
                   CPU_Usage1 = randomNum.Next(10, 60),
                   CPU_Usage2 = randomNum.Next(60, 100)
               });
       // Starting live update in the chart.
       timer = new Timer(1000);
       timer.Elapsed += AddData;
       timer.AutoReset = true;
       timer.Enabled = true;
   }
   
   private void AddData(Object source, ElapsedEventArgs e)
   {
       if (liveChart == null)
           return;
       dataLength++;
       DataPoints.RemoveAt(0);
       DataPoints.Add(new ChartDataPoint
           {
               Time = DateTime.Now.AddSeconds(dataLength + 10),
               CPU_Usage1 = randomNum.Next(10, 60),
               CPU_Usage2 = randomNum.Next(60, 100),
           });
   }
   
   public class ChartDataPoint
   {
       public DateTime Time { get; set; }
       public double CPU_Usage1 { get; set; }
       public double CPU_Usage2 { get; set; }
   }
} 

The following GIF illustrates the output of the code snippet.

Live Sample for Toggling Series Visibility During Live Updates

Conclusion

I hope you enjoyed learning how to toggle series visibility during live updates in Blazor Charts.

You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart example 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!