How to Reset Zoom in Blazor Chart with Secondary Axes

2 mins read

Blazor Charts support zooming on both primary and secondary axes. To programmatically reset the zoom, you must manually reset the ZoomFactor and ZoomPosition properties for each axis.

This guide demonstrates how to implement a reset mechanism for:

Primary X Axis
Primary Y Axis
Secondary Y Axis (or any additional axes)

Implementation Steps

Bind Zoom Properties
Ensure each axis (primary and secondary) binds to ZoomFactor and ZoomPosition parameters.
Create a Reset Method
Define a method that sets all zoom factors to 1 and positions to 0.
Trigger the Reset
Use a button to trigger the reset method.

Sample Code

<SfChart Title="Weather Reports">
   <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" ZoomFactor="@zoomFactorXAxis" ZoomPosition="@zoomPositionXAxis" />
   <ChartPrimaryYAxis ZoomFactor="@zoomFactorYAxis" ZoomPosition="@zoomPositionYAxis">
   </ChartPrimaryYAxis>
   <ChartAxes>
       <ChartAxis Name="YAxis" OpposedPosition="true" ZoomFactor="zoomFactorSecYAxis" ZoomPosition="zoomPositionSecYAxis" />
   </ChartAxes>

   <ChartSeriesCollection>
       <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="ChartSeriesType.Column" />
       <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y1" YAxisName="YAxis" />
   </ChartSeriesCollection>
   <ChartZoomSettings EnableMouseWheelZooming="true" EnablePinchZooming="true" EnableSelectionZooming="true"></ChartZoomSettings>
</SfChart>
<button @onclick="Reset">Reset Zooming</button>
@code {

     private double zoomFactorXAxis = 1; 
    private double zoomFactorYAxis = 1; 
   private double zoomFactorSecYAxis = 1; 

  private double zoomPositionXAxis = 0; 
   private double zoomPositionYAxis = 0; 
    private double zoomPositionSecYAxis = 0; 
 
     private void Reset(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) 
    { 
        zoomFactorXAxis = 1; 
        zoomFactorYAxis = 1; 
        zoomFactorSecYAxis = 1; 
        zoomPositionXAxis = 0; 
       zoomPositionYAxis = 0; 
        zoomPositionSecYAxis = 0; 
    }
}

Output

Before Reset:

After Reset:

Sample

Download Sample

Conclusion

I hope you enjoyed learning about how to reset zoom in Blazor Chart with secondary axes.

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

Comments (0)