How to Maintain Zoom State for 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

Conclusion
I hope you enjoyed learning how to maintain zoom state for datasource update in Blazor Charts.
You can refer to our Blazor Charts 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 Charts 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!