ejs-chart - reset zoom programmatically & set maximum zoom

[Ewa Baumgarten]

Hello,

two questions about the Syncfusion Chart:

Reset zoom programmatically

In the UI, I can use this button:

... however, I haven't found a way of achieving the same result programmatically. How can I do that?

Set maximum zoom

Second question: is there a way to limit the maximum zoom? I've tried hooking into onZooming and cancelling the event, or even overwriting the event's properties with the current settings from my axis before they can be applied. However, that did not work.

Thank you!

[Nishanthi Panner Selvam]

Ewa,

Greetings from Syncfusion.

Query1: Reset zoom programmatically.

We have analyzed your reported query based on that we suggest you to set the zoomFactor and zoomPosition as 1 and 0. This approach will enable you to refresh the charts programmatically.

We have attached code-snippet, sample and screenshot for your reference.

Code-snippet:

< button(click) = "applyRefresh()" > Refresh </ button >

            public applyRefresh(): void {

                this.chart.primaryXAxis.zoomFactor = 1;

                this.chart.primaryXAxis.zoomPosition = 0;

                this.chart.dataBind();

            }

Screenshot:

After zooming	After clicking refresh button

Sample: https://stackblitz.com/edit/angular-gxopbj-deej5y?file=src%2Fapp.component.ts,src%2Fapp.component.html,src%2Fapp.component.css

Query2 : Set maximum zoom

To set maximum zoom, We suggest you to set enableSelectionZooming to false whenever it exceeds certain zoomFactor.

We have attached code-snippet and sample for your reference.

Code-snippet:

public zoomComplete(args): void {

                if (args.currentZoomFactor > 0.6)

                {

                    this.chart.zoomSettings.enableSelectionZooming = false;

                }

                else

                {

                    this.chart.zoomSettings.enableSelectionZooming = true;

                }

            }

Sample: https://stackblitz.com/edit/angular-s6fkca-mhcv2x?file=src%2Fapp.component.ts,src%2Fapp.component.html

Kindly revert us if you have any concerns.             

Regards,

Nishanthi

[Ewa Baumgarten]

Hello Nishanthi, thank you for your reply!

Reset Zoom

I've implemented the zoom factor reset and am glad to say that it works right out of the box.

public resetZoom(): void {
  this.chart.primaryXAxis.zoomFactor = 1;
  this.chart.primaryXAxis.zoomPosition = 0;


  // now apply it
  this.chart.dataBind();
}

I arrived at the first two lines of code myself; however, it didn't occur to me to call dataBind. Would it be possible to add a dedicated method in a future release? That would be both self-explanatory and would save others the search.

public resetZoom(): void {
  this.chart?.resetZoom();
  // or maybe
  this.chart?.setZoomFactor('Horizontal', 1);
}

Maximum zoom

I have observed that when I zoom in really far (e.g. an interval of a week to the point where I see individual seconds), the zoom-out button will trigger a very minimal zoom that's barely noticeable. (Which is the reason why I wanted to limit the zoom in the first place - of course the first person who used the prototype ran into that.)

I haven't tried your solution yet, but would it be possible to add a property to zoomSettings for a future release? maximumZoomPercentage and minimumZoomInterval should cover all use cases I can think of.

Regards,

[Nishanthi Panner Selvam]

Ewa,

Query1 : Reset Zoom

We regret to inform you that at the moment, our only method for programmatically resetting the zoom involves setting the 'zoomFactor' to 1 and the 'zoomPosition' to 0. Unfortunately, there is no alternative approach available.

Query2: Maximum Zoom

We appreciate your feedback and the time you've taken to share your suggestions with us. After careful analysis, we regret to inform you that incorporating the properties "maximumZoomPercentage" and "minimumZoomInterval" is not possible into our current system.

Kindly revert us if you have any concerns.

Regards,

Nishanthi