How to maintain zoom state after new datasource update in Blazor Charts?

This article explains how to maintain zoom state after updating the new datasource.

Maintain zoom state after new datasource update

Blazor Charts provides an option to maintain the zoom state after new datasource update using ZoomFactor and ZoomPosition.

This can be achieved by storing the ZoomFactor and ZoomPosition value in OnZoomEnd event after performing the zooming operations. Then while updating the chart with new datasource, you can update the axis ZoomFactor and ZoomPosition values with previously stored values.

The below code example demonstrates how to maintain zooming after new data update.

@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons
<SfButton Content="Update" @onclick="ChangeData" IsPrimary="true"></SfButton>
<SfChart Title="Crude Steel Production Annual Growth">
   <ChartEvents OnZoomEnd="OnZoomingEvent"></ChartEvents>
   <ChartPrimaryXAxis ZoomFactor="@zoomFactor" ZoomPosition="@zoomPosition">
   </ChartPrimaryXAxis>
   <ChartSeriesCollection>
       <ChartSeries DataSource="@ChartData" Name="Vietnam" XName="Period" Width="2"
                    Opacity="1" YName="Viet_Growth" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line">
           <ChartMarker Visible="true" Width="7" Height="7" IsFilled="true" Shape="ChartShape.Circle">
           </ChartMarker>
       </ChartSeries>
       <ChartSeries DataSource="@ChartData" Name="Canada" XName="Period" Width="2"
                    Opacity="1" YName="Can_Growth" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line">
           <ChartMarker Visible="true" Width="6" IsFilled="true" Height="6" Shape="ChartShape.Triangle">
           </ChartMarker>
       </ChartSeries>
   </ChartSeriesCollection>
   <ChartZoomSettings EnableSelectionZooming="true" EnableScrollbar="true"></ChartZoomSettings>
   <ChartLegendSettings Visible="true"></ChartLegendSettings>
</SfChart>
@code {
   public double zoomFactor = 1;
   public double zoomPosition = 0;
   public double prevZoomFactor { get; set; }
   public double prevZoomPosition {get;set;}
   public void OnZoomingEvent(ZoomingEventArgs args)
   {
       prevZoomFactor = args.AxisCollection[0].ZoomFactor;
           prevZoomPosition = args.AxisCollection[0].ZoomPosition;
   }
   public class LineChartData
   {
       public DateTime Period { get; set; }
       public double Can_Growth { get; set; }
       public double Viet_Growth { get; set; }
   }
   public List<LineChartData> ChartData = new List<LineChartData>
   {
       new LineChartData { Period = new DateTime(2012, 01, 01), Can_Growth = 11, Viet_Growth = 19, },
       new LineChartData { Period = new DateTime(2013, 01, 01), Can_Growth = 12, Viet_Growth = 17, },
        //...
   };
   public void ChangeData()
   {
       ChartData = new List<LineChartData>
       {
           new LineChartData { Period = new DateTime(2012, 01, 01), Can_Growth = 31, Viet_Growth = 59 },
           new LineChartData { Period = new DateTime(2013, 01, 01), Can_Growth = 32, Viet_Growth = 57 },
            //...
       };
       zoomFactor = prevZoomFactor;
       zoomPosition = prevZoomPosition;
   }
} 

The following screenshot illustrates the output of the code snippet.

Output

Live Sample for Maintaining Zoom State