1. Home
  2. Forum
  3. Blazor
  4. Do you have an example to share that shows manual zooming and reset in a Blazor chart?

Do you have an example to share that shows manual zooming and reset in a Blazor chart?

I tried to figure this out via the Blazor Charts documentation but couldn't do so.  

Thanks for your help...

5 Replies
SM Srihari Muthukaruppan Syncfusion Team May 28, 2020 08:35 AM UTC

Hi Louis, 
  
We have analyzed your query. We would like to let you know that we can achieve your requirement using the zoomFactor and ZoomPostion property in the chart. Based on that we have prepared a sample for your reference. Please find the sample, code snippet, and screenshot for your reference. 
  
  
Code Snippet: 
  
<SfButton CssClass="e-info" IsPrimary="true" @onclick="LoadChart">Zoom Chart</SfButton> 
<SfButton CssClass="e-info" IsPrimary="true" @onclick="Reset">Reset</SfButton> 
<SfChart Title="Inflation - Consumer Price" @ref="ChartInstance"> 
   // add additional code here
</SfChart>  
  
@code{ 
    SfChart ChartInstance; 
   // add additional code here 
    void LoadChart() 
    { 
        ChartInstance.PrimaryXAxis.ZoomFactor = 0.5; 
        ChartInstance.PrimaryXAxis.ZoomPosition = 0.5; 
        ChartInstance.Refresh(); 
    } 
    void Reset() 
    { 
        ChartInstance.PrimaryXAxis.ZoomFactor = 1; 
        ChartInstance.PrimaryXAxis.ZoomPosition = 1; 
        ChartInstance.Refresh(); 
    } 
} 

Screenshot: 
Zoom click: 
  
  
Reset Button Click: 
 
  
  
Let us know if you have any concerns. 
  
Regards, 
Srihari M 


MA Mr Andrey Voronov October 7, 2021 07:39 AM UTC

I am using 19.3.44 version, SfChart seems to does not have PrimaryXAxis property in this version, but I added reference to axis istead: 

<ChartPrimaryXAxis @ref="xaxis">


Axis scroll bar set to "Enabled":

<ChartZoomSettings Mode="ZoomMode.X" EnableSelectionZooming="true" EnablePan="true" EnableMouseWheelZooming="true" EnablePinchZooming="true" EnableScrollbar="true"></ChartZoomSettings>


manual Reset() resets chart scaling, but scroll bar not reset and remains visible

 
 

DG Durga Gopalakrishnan Syncfusion Team October 8, 2021 03:14 PM UTC

Hi Mr Andrey, 

We have validated your reported scenario. As of now we have included required properties alone in chart reference. We suggest you to use property binding or axis reference to reset zooming manually. Chart axis scrollbar is removed properly after resetting. We have attached the modified sample and video for your reference.  

<SfChart @ref="ChartInstance"> 
    <ChartPrimaryXAxis ZoomFactor="@ZF" ZoomPosition="@ZP"> 
    </ChartPrimaryXAxis> 
</SfChart> 
@code{ 
    SfChart ChartInstance; 
    public double ZF = 1; 
    public double ZP = 0; 
    void LoadChart() 
    { 
        ZF = 0.5; 
        ZP = 0.5; 
        ChartInstance.Refresh(); 
    } 
    void Reset() 
    { 
        ZF = 1; 
        ZP = 0; 
        ChartInstance.Refresh(); 
    } 
} 



If you are still facing problem, please try to replicate an issue in above sample or share us issue reproduced sample so that it will be helpful for further analysis. 

Regards, 
Durga G 


MA Mr Andrey Voronov October 18, 2021 07:09 AM UTC

I tried sample provided. EnableSelectionZooming="true" ​works until you press RESET button.

Once I press RESET button, I no longer able to select range using mouse.




DG Durga Gopalakrishnan Syncfusion Team October 19, 2021 04:16 PM UTC

Hi Andrey, 

We have validated your reported scenario. We suggest you to disable EnablePan for chart zooming to overcome the reported problem while resetting the zooming manually. Please mention whether you need to perform panning for chart using this property or by using zoomkit toolbar icons. We have attached modified sample for your reference. 


Kindly revert us if you have any concerns. 

Regards, 
Durga G

Loader.
Up arrow icon