How to reset zoom on Angular Charts using a button click?

2 mins read

Description

This article explains how to reset a zoomed-in Angular Chart to its original view using a button click.

Solution

Zooming in charts allows you to focus on specific regions of the data for a more detailed view. By enabling the showToolbar property in zoomSettings, you can display the zooming toolbar on initial rendering of the chart. This toolbar includes buttons for zoom, zoom-in, zoom-out, pan, and reset. If you need to reset the zoomed chart, simply set the zoomFactor property to 1 and the zoomPosition property to 0.

Code Snippet

app.component.html

<button ejs-button (click)="resetZoom()">Reset Zoom</button>
<ejs-chart [zoomSettings]='zoomSettings'>
</ejs-chart>

app.component.ts

   public zoomSettings: Object = {
       mode: 'X',
       enableMouseWheelZooming: true,
       enablePinchZooming: true,
       enableSelectionZooming: true,
       showToolbar: true
   };
   public resetZoom(): void {
      this.chart.primaryXAxis.zoomFactor = 1;
      this.chart.primaryXAxis.zoomPosition = 0;
   }

The following image illustrates the output of the above code.