---
title: "Zoom"
enterprise: true
framework: angular
version: "14.1.0"
---

# Zoom

AG Charts allows zooming into charts, making it easier to navigate large datasets.

#### Zoom

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Zoom](https://www.ag-grid.com/charts/angular/zoom/examples/zoom)

To enable this feature, set `zoom.enabled` to `true`.

```js
{
    zoom: {
        enabled: true,
    },
}
```

In the above example you can:

- Scroll in and out with the mouse wheel or trackpad.
- Zoom and pan using [touch and multi-touch](https://www.ag-grid.com/charts/angular/touch/) functionality.
- Use `+` and `-` keys to zoom in or out (when in focus).
- Click and drag the mouse to pan around the zoomed in chart.
- Click (or touch) and drag an axis to zoom in or out on only that axis.
- Double click (or double tap) anywhere to reset the zoom.
- Double click (or double tap) an axis to reset the zoom on only that axis.

> **Note**
>
> If `axis[].tick.maxSpacing` is provided, the axis ticks and labels will update with the zoom.

## Scrolling

This allows zooming by using the mouse wheel or trackpad, as shown in the above example and is enabled by default. To disable, use `enableScrolling: false`.

### Anchor Point

By default, the chart will zoom while keeping the right side of the x-axis pinned. You can change this anchor point with the `anchorPointX` and `anchorPointY` properties, setting them each to one of:

- `start`, the left or bottom of the chart when scrolling on the x-axis or y-axis respectively,
- `middle` (default for y-axis), the middle of the chart,
- `end` (default for x-axis), the right or top of the chart when scrolling on the x-axis or y-axis respectively,
- `pointer`, keep the mouse pointer above the same position on the chart when zooming.

In the example below, we set the anchor point for both axes to the mouse pointer.

#### Zoom Anchor Point

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Zoom Anchor Point](https://www.ag-grid.com/charts/angular/zoom/examples/zoom-anchor-point)

```js
{
    zoom: {
        anchorPointX: 'pointer',
        anchorPointY: 'pointer',
    },
}
```

### Scrolling Step

When scrolling, the chart zooms in by a single step for each movement of the scroll wheel or trackpad. By default `scrollingStep` is set to `0.1`, or 10% of the chart each time.

In the example below, we change the step to `0.4`.

#### Zoom Scrolling Step

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Zoom Scrolling Step](https://www.ag-grid.com/charts/angular/zoom/examples/zoom-scrolling-step)

```js
{
    zoom: {
        scrollingStep: 0.4,
    },
}
```

### Axes

By default, scrolling zoom is only enabled for the `x` axis. This can be changed by setting the `axes` property to `x`, `y` or `xy`.

In the example below, we enable zoom on both the `x` and `y` axes.

#### Zoom Axes

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Zoom Axes](https://www.ag-grid.com/charts/angular/zoom/examples/zoom-axes)

```js
{
    zoom: {
        axes: 'xy',
    },
}
```

### Scrolling Mode

By default, vertical mouse wheel or trackpad scrolling zooms the chart. Set `scrollingMode: 'pan'` to pan instead.

#### Zoom Scrolling Mode

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Zoom Scrolling Mode](https://www.ag-grid.com/charts/angular/zoom/examples/zoom-scrolling-mode)

```js
{
    zoom: {
        scrollingMode: 'pan',
    },
}
```

## Panning

This is enabled by default and allows users to click and drag to move around a zoomed chart. To disable, use `enablePanning: false`.

If [zoom by selecting](#selecting) is enabled, clicking and dragging will no longer pan by default. Instead the user will need to hold down a key to switch to panning mode.

This key defaults to `alt` but can be set with the `panKey` property to one of `alt`, `ctrl`, `shift` or `meta` (the command key on MacOS or start key on Windows).

In the example below, panning can only be done by holding down the `shift` key while clicking and dragging.

#### Zoom Pan Key

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Zoom Pan Key](https://www.ag-grid.com/charts/angular/zoom/examples/zoom-pan-key)

```js
{
    zoom: {
        panKey: 'shift',
    },
}
```

## Selecting

This method of zooming works by clicking and dragging a box to select an area on the chart. This is disabled by default. To enable, use `enableSelecting: true`.

In the example below, the user can only zoom in by selection, and can only zoom out by double-click to reset.

#### Zoom Selecting

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Zoom Selecting](https://www.ag-grid.com/charts/angular/zoom/examples/zoom-selecting)

```js
{
    zoom: {
        enableAxisDragging: false,
        enablePanning: false,
        enableScrolling: false,
        enableSelecting: true,
    },
}
```

## Two Finger Zoom-Pan

By default, using two fingers to pinch in or out will zoom the chart. It is also possible to use two fingers to pan a zoomed chart.

To disable this behaviour, use `enableTwoFingerZoom: false`.

#### Two Finger Zoom-Pan Disabled

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Two Finger Zoom-Pan Disabled](https://www.ag-grid.com/charts/angular/zoom/examples/two-finger-disabled)

```js
{
    zoom: {
        enableTwoFingerZoom: false,
    },
}
```

In the above example:

- Two fingers gestures are not consumed by the chart. Instead they zoom or scroll the entire page.

## Axis Zoom Controls

By default, a user can click and drag on any axis to change the zoom of that axis. This ignores the `axes` property and is enabled by default for all axes.

#### Axis Zoom Controls

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Axis Zoom Controls](https://www.ag-grid.com/charts/angular/zoom/examples/zoom-axis-controls)

- When using `axisDraggingMode: 'zoom'` (default), dragging either of the y-axes will zoom both of them.
- Use `axisDraggingMode: 'pan'` to pan while dragging an axis.
- Use `enableAxisDragging: false` to disable all axis dragging.
- Scrolling on an axis to zoom is enabled by default. Use `enableAxisScrolling: false` to disable it.

## Double-Click to Reset

This allows users to reset the zoom by double-clicking in an empty space in the chart area, and is enabled by default. To disable, use `enableDoubleClickToReset: false`.

## Minimum Visible Items

The `minVisibleItems` option can be used to limit how far a user can zoom in to the chart.

The example below demonstrates setting `minVisibleItems` to `10`, preventing the user from zooming beyond showing a minimum of 10 points on the line.

#### Zoom Min Visible Items

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Zoom Min Visible Items](https://www.ag-grid.com/charts/angular/zoom/examples/zoom-min-visible-items)

```js
{
    zoom: {
        minVisibleItems: 10,
    },
}
```

## Auto Scaling

Auto Scaling dynamically adjusts the y-axis to fit the visible data whenever the x-axis is zoomed or panned. This is enabled by default when zooming the x-axis. To disable, use `autoScaling: false`.

#### Auto Scaling

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Auto Scaling](https://www.ag-grid.com/charts/angular/zoom/examples/auto-scaling)

```js
{
    zoom: {
        autoScaling: {
            enabled: false,
        },
    },
}
```

In the above example:

- Zoom in to the chart by scrolling and then pan left and right.
- Observe how the vertical axis domain changes to fit the displayed data range.

Auto Scaling is never applied when the user has manually adjusted the y-axis by dragging it. Auto Scaling will be reapplied when the y-axis is reset, for example by double clicking on it.

## On Data Change

When data is updated while the chart is zoomed, the `zoom.onDataChange` options control how the zoomed view adjusts. This helps users maintain their focus when data changes, or always see the latest data.

The default strategy is `preserveDomain`, use `onDataChange.strategy` to change to one of the below.

### Preserve Domain

`strategy: 'preserveDomain'` preserves the current axis domain when data changes, keeping the view at the exact domain values if possible.

This is useful for appending data without disrupting users viewing a specific time period in the middle of the data.

#### Preserve Domain

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Preserve Domain](https://www.ag-grid.com/charts/angular/zoom/examples/on-data-change-preserve-domain)

```js
{
    zoom: {
        enabled: true,
        onDataChange: {
            strategy: 'preserveDomain',
        },
    },
}
```

In this example:

- The chart is initially zoomed to the middle of the data.
- Start the updates to see new data appended at the end.
- Notice in the Navigator that new data has been added, but the chart view remains fixed on the same time range.

### Preserve Ratios

`strategy: 'preserveRatios'`, preserves the same zoom percentages regardless of data changes.

This is useful for maintaining a consistent proportional view of your data, with more data points becoming visible as the dataset grows.

#### Preserve Ratios

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Preserve Ratios](https://www.ag-grid.com/charts/angular/zoom/examples/on-data-change-preserve-ratio)

```js
{
    zoom: {
        enabled: true,
        onDataChange: {
            strategy: 'preserveRatios',
        },
    },
}
```

In this example:

- The chart is initially zoomed to the last 20% of the data.
- Start the updates to see new data points added in batches.
- Notice that more data points become visible in the chart view as total data grows, since the zoom ratio stays at 80%-100%.

### Reset

`strategy: 'reset'`, resets the zoom to the `initialState` or no zoom, whenever the data changes.

This is useful for switching between unrelated datasets, discarding previous user interactions and reverting to a predefined starting view.

#### Reset

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Reset](https://www.ag-grid.com/charts/angular/zoom/examples/on-data-change-reset)

```js
{
    zoom: {
        enabled: true,
        onDataChange: {
            strategy: 'reset',
        },
    },
}
```

In this example:

- The chart is initially zoomed to show only the last few data points.
- Pan or zoom to a different position in the chart.
- Click a button to switch datasets and notice that the zoom resets to the initial state.

### Stick to End

The `stickToEnd` option automatically scrolls to keep the latest data visible when new data is appended and the view is already at the end of the data range. Use `stickToEnd: true` to enable.

When `stickToEnd` is active, it takes precedence over the configured strategy. Once the user pans away from the end, the configured strategy (e.g., `preserveDomain`) takes over until they return to viewing the end.

#### Stick to End

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Stick to End](https://www.ag-grid.com/charts/angular/zoom/examples/on-data-change-stick-to-end)

```js
{
    zoom: {
        enabled: true,
        onDataChange: {
            strategy: 'preserveDomain',
            stickToEnd: true,
        },
    },
}
```

In this example:

- The chart is initially zoomed to the end of the data.
- Start the updates to see new data appended and the view scrolls to follow.
- Pan away from the end to see the `preserveDomain` strategy take over with a fixed view.
- Pan back to the end and the view will resume following new data.

## Navigator

The zoom functionality can be used together with the [Navigator](https://www.ag-grid.com/charts/angular/navigator/) to add a visual reference to the zoom position.

## Context Menu

When both the zoom and [Context Menu](https://www.ag-grid.com/charts/angular/context-menu/) are enabled, additional zoom actions are added into the Context Menu for zooming and panning to the clicked location.

#### Zoom Context Menu

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Zoom Context Menu](https://www.ag-grid.com/charts/angular/zoom/examples/zoom-context-menu)

## Buttons

Zoom buttons are enabled by default. To disable, use `zoom.buttons.enabled: false`.

#### Zoom Buttons

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Zoom Buttons](https://www.ag-grid.com/charts/angular/zoom/examples/zoom-buttons)

Hover near the bottom of the above example to see the default zoom buttons.

- **Zoom out**: Zooms the chart out by one [step](#scrolling-step).
- **Zoom in**: Zooms the chart in by one [step](#scrolling-step).
- **Pan left**: Pans the chart to the left by one [step](#scrolling-step).
- **Pan right**: Pans the chart to the right by one [step](#scrolling-step).
- **Reset**: Resets the zoom to the original level and position. Equivalent to [Double-Click to Reset](#double-click-to-reset).

To change when the buttons will appear, use `zoom.buttons.visible`:

- `always` – The buttons will always be visible.
- `zoomed` – The buttons will appear when the chart has been zoomed.
- `hover` – The buttons will appear when the mouse is hovered near the bottom of a chart which has zoom enabled.

### Customisation

It is possible to customise the visibility, order and grouping of buttons, as well as modifying the icon, label text and tooltip for each.

#### Customised Zoom Buttons

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Customised Zoom Buttons](https://www.ag-grid.com/charts/angular/zoom/examples/zoom-custom-buttons)

```js
{
    zoom: {
        buttons: {
            visible: 'always',
            buttons: [
                {
                    icon: 'zoom-in',
                    tooltip: 'Decrease Visible Range',
                    value: 'zoom-in',
                    label: 'In',
                    section: 'zoom',
                },
                {
                    icon: 'zoom-out',
                    tooltip: 'Increase Visible Range',
                    value: 'zoom-out',
                    label: 'Out',
                    section: 'zoom',
                },
                {
                    icon: 'pan-start',
                    tooltip: 'Pan to Start',
                    value: 'pan-start',
                    section: 'pan',
                },
                {
                    icon: 'pan-end',
                    tooltip: 'Pan to End',
                    value: 'pan-end',
                    section: 'pan',
                },
                {
                    tooltip: 'Undo all Zoom',
                    value: 'reset',
                    label: 'Reset',
                    section: 'reset',
                },
            ],
        },
    },
}
```

In the above example:

- The pan-left and pan-right buttons are not shown.
- Additional buttons are added to enable panning to the start and end of the x-axis.
- All the buttons have custom tooltip text.
- The order of the zoom-in and zoom-out buttons is swapped and they have a label as well as an icon.
- The reset button has only a label and no icon.

For more information see the [API Reference section](#reference-AgZoomOptions-buttons-buttons).

## Asynchronous Loading

For loading data asynchronously as the user zooms and pans, see [Asynchronous Data](https://www.ag-grid.com/charts/angular/async-data/).

## Save & Restore

The zoom state can be saved, restored and programmatically initialised and modified, using the [Chart State API](https://www.ag-grid.com/charts/angular/api-state/).

## API Reference

#### Zoom

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| anchorPointX | 'pointer' \| 'start' \| 'middle' \| 'end' | end | The anchor point for the x-axis about which to zoom into when scrolling. |
| anchorPointY | 'pointer' \| 'start' \| 'middle' \| 'end' | middle | The anchor point for the y-axis about which to zoom into when scrolling. |
| autoScaling | AgZoomAutoScaling |  | Zoom auto scaling options. |
| autoScaling.enabled | boolean | true | Set to `false` to disable the auto scaling of the y-axis when zooming the x-axis. |
| autoScaling.padding | Ratio |  | Padding to apply between the zoomed data and the boundary of the series. |
| axes | 'x' \| 'y' \| 'xy' | x | The axes on which to zoom when scrolling, one of `xy`, `x`, or `y`. |
| axisDraggingMode | 'pan' \| 'zoom' | zoom | Whether dragging an axis pans or zooms, if `enableAxisDragging` is enabled. |
| buttons | AgZoomButtons |  | A set of buttons to perform common zoom actions. |
| buttons.buttons | AgZoomButton[] |  | The buttons to show. |
| buttons.buttons.value (required) | 'reset' \| 'zoom-in' \| 'zoom-out' \| 'pan-left' \| 'pan-right' \| 'pan-start' \| 'pan-end' |  | The action to perform when the button is clicked. |
| buttons.buttons.section (required) | string |  | The toolbar section in which to display this button. |
| buttons.buttons.icon | AgIconName |  | Icon to display on the button. |
| buttons.buttons.label | string |  | Text label to display on the button. |
| buttons.buttons.ariaLabel | string |  | Text label to announce in screen readers. |
| buttons.buttons.tooltip | string |  | Tooltip text to display on hover over the button. |
| buttons.visible | 'always' \| 'zoomed' \| 'hover' | 'hover' | When the buttons should be visible. |
| buttons.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| deceleration | 'off' \| 'short' \| 'long' \| Ratio | short | Rate of deceleration of panning when dragging and releasing a zoomed chart. |
| enabled | boolean | false | Set to `true` to enable the zoom module. |
| enableAxisDragging | boolean | true | Set to `true` to enable dragging an axis to zoom series attached to that axis. |
| enableAxisScrolling | boolean | true | Set to `true` to enable scrolling an axis to zoom series attached to that axis. |
| enableDoubleClickToReset | boolean | true | Set to `true` to enable double-clicking to reset the chart to fully zoomed out. |
| enablePanning | boolean | true | Set to `true` to enable panning while zoomed. |
| enableScrolling | boolean | true | Set to `true` to enable zooming with the mouse wheel. |
| enableSelecting | boolean | false | Set to `true` to enable selecting an area of the chart to zoom into. |
| enableTwoFingerZoom | boolean | true | Set to `true` to enable zoom-panning with two touch points. |
| keepAspectRatio | boolean | false | Set to `true` to keep the selection area matching the chart's aspect ratio. |
| minVisibleItems | number | 2 | The minimum number of items to be shown, beyond which zooming is stopped. Set to `0` to allow unlimited zooming. |
| panKey | 'alt' \| 'ctrl' \| 'meta' \| 'shift' | alt | The key that should be pressed to allow dragging to pan around while zoomed, one of `alt`, `ctrl`, `meta` or `shift`. |
| scrollingMode | 'pan' \| 'zoom' | zoom | Whether scrolling the mouse wheel or track pad vertically zooms or pans. |
| scrollingStep | Ratio | 0.1 | The amount to zoom when scrolling with the mouse wheel, as a ratio of the full chart. |
| onDataChange | AgZoomOnDataChange |  | Configuration for how the zoom-pan should respond to data changes |
| onDataChange.strategy | 'reset' \| 'preserveDomain' \| 'preserveRatios' | 'preserveDomain' | The behaviour of how to adjust the zoom when chart data changes. |
| onDataChange.stickToEnd | boolean | false | When `true`, the zoom will be adjusted to ensure that newly appended data is in the viewport. This behaviour only happens if the chart's horizontal viewport is panned all the way to the very end of data range; otherwise the current `strategy` is used instead. |

#### Data Source

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| getData (required) | Function |  | Asynchronous callback to load data into the chart. |