How to apply lazy loading to financial charts in Blazor Charts?

This article explains how to apply lazy loading to financial charts.

Blazor Charts provides lazy loading support for financial charts such as Hilo, Hilo Open-Close, and Candle charts.

Lazy loading enables the chart to load data on demand. The OnScrollChanged event is triggered by the chart, allowing us to retrieve the minimum and maximum axis ranges and then load the corresponding data into the chart. You can enable lazy loading for financial chart by setting the ChartSeries Type to Candle.

The below code example demonstrates how to apply lazy loading for candle chart.

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

@if (StockDetails != null)
{
   <SfChart Title="Lazy Loading Chart">
       <ChartEvents OnScrollChanged="@ScrollChange"></ChartEvents>
       <ChartPrimaryXAxis>
           <ChartAxisScrollbarSettings Enable="true" PointsLength="1000"></ChartAxisScrollbarSettings>
       </ChartPrimaryXAxis>
       <ChartSeriesCollection>
           <ChartSeries DataSource="@StockDetails" XName="X" High="High" 
                        Low="Low" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Candle" Open="Open" Close="Close">
           </ChartSeries>
       </ChartSeriesCollection>
   </SfChart>
}
else
{
   <p>Chart Loading</p>
}

@code {

   int count = 1;
   Random random = new Random();
   public ObservableCollection<Data> StockDetails;

   protected override void OnInitialized()
   {
       StockDetails = this.GetData();
   }

   public void ScrollChange(ScrollEventArgs e)
   {
       this.StockDetails = GetRangeData(Convert.ToInt32(e.CurrentRange.Minimum), Convert.ToInt32(e.CurrentRange.Maximum));
       this.StateHasChanged();
   }

   public ObservableCollection<Data> GetRangeData(int min, int max)
   {
       ObservableCollection<Data> data = new ObservableCollection<Data>();
       for (; min <= max; min++)
       {
           data.Add(new Data
               {
                   X = min,
                   Y= random.Next(10, 100),
                   High = random.Next(150, 200),
                   Low = random.Next(100, 150),
                   Open = random.Next(100, 150),
                   Close = random.Next(150, 200)
               });
       }
       return data;
   }

   public ObservableCollection<Data> GetData()
   {
       ObservableCollection<Data> data = new ObservableCollection<Data>();
       for (; count <= 100; count++)
       {
           data.Add(new Data
               {
                   X = count,
                   Y = random.Next(10, 100),
                   High = random.Next(150, 200),
                   Low = random.Next(100, 150),
                   Open = random.Next(100, 150),
                   Close = random.Next(150, 200)
               });
       }
       return data;
   }
   public class Data
   {
       public double X { get; set; }
       public double Y { get; set; }
       public double High { get; set; }
       public double Low { get; set; }
       public double Open { get; set; }
       public double Close { get; set; }
   }
} 

Output

The following screenshot illustrates the output of the code snippet.

Live Sample for LazyLoading Candle Chart