Angular ChartsZoom
angular logo
Enterprise

AG Charts provides two methods of zooming, either by scrolling with the mouse wheel or selecting an area of the chart to zoom into.

To enable these features, set zoom.enabled to true.

zoom: {
    enabled: true,
}

A user will now be able to use the zooming features as in the following example, including:

  • Scroll in and out with the mouse wheel.
  • Click and drag to pan around the zoomed in chart.
  • Click and drag an axis to zoom in or out on only that axis.
  • Double click anywhere to reset the zoom.
  • Click and drag a box to select an area to zoom into (not enabled by default).

Enabling and Disabling Features

You can enable and disable each feature of the zoom module separately if they are not appropriate for your chart. These can be toggled with the enablePanning, enableScrolling and enableSelecting options.

In the example below, we only enable selecting an area.

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

Axes

Zooming can be enabled for either the x or y axis, or for both at the same time with xy using the axes property. By default, zooming is only enabled on the x axis.

In the example below, we enable zoom on the y axis. By also providing a axis[].tick.minSpacing and axis[].tick.maxSpacing, the axis ticks update with the zoom.

zoom: {
    axes: 'xy',
}

Dragging an Axis

By default, a user can click and drag on an axis to change the zoom of that axis. This ignores the axes property, so will either be enabled for all axes or none using the enableAxisDragging property.

In the example below, we have series attached to different y-axes. Both y-axes are zoomed in sync with each other.

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 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 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: {
    anchorPointX: 'pointer',
    anchorPointY: 'pointer',
}

Scrolling Step

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

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

zoom: {
    scrollingStep: 0.4,
}

Minimum Visible Items

The minVisibleItemsX and minVisibleItemsY options can be used to limit how far a user can zoom in to the chart, helping to prevent them from getting lost in a blank space of the chart. These options set the minimum number of items visible on each axis, for example the number of bars in a bar series or points in a line series. The default for both values is 2.

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

zoom: {
    minVisibleItemsX: 10,
}

Pan Key

While zoomed in to the chart, a user can pan around by clicking and dragging.

If you have enabled selecting an area to zoom as well using enableSelecting: true, 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 on the panKey property to one of alt, ctrl, shift or meta (the command key on MacOS or start key on Windows).

zoom: {
    panKey: 'shift',
}

Context Menu

When both the zoom and context menu are enabled, additional zoom actions are added into the context menu for zooming and panning to the clicked location.

Asynchronous Loading

Use the dataSource option to asynchronously load in new data as the chart is zoomed.

dataSource: {
    getData: ({ windowStart, windowEnd }) => {
        return FakeServer.get(windowStart, windowEnd);
    };
}

In this example, the getData function returns both the coarse data plus additional finer grained data for the visible time window.

The data returned from the getData function should always include the coarse data set to ensure the chart knows the full extent of the data.

The windowStart and windowEnd parameters will be undefined if the chart does not have a time axis. They will also be undefined on the first call to dataSource.getData() if no axis[].min and axis[].max are provided on the time axis.

API Reference