Angular ChartsZoomEnterprise

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.

zoom: {
    axes: 'y',
}

Dragging an Axis

By default, a user can click and drag on an axis to change the zoom of that axis and any series associated with it, independently of other axes and series. 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.

Scrolling Pivot

By default, the chart will zoom while keeping the right side of the x-axis pinned. You can change this pivot point with the scrollingPivot property, setting it one of:

• end (default), the right or top of the chart when scrolling on the x or y axis respectively,
• start, the left or bottom 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 pivoting to about the pointer.

zoom: {
    scrollingPivot: '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,
}

Min X/Y Ratio

The minXRatio and minYRatio 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 are defined as the minimum proportion of the full chart that can be displayed. The default for both values is 0.2.

The example below demonstrates setting both these properties to 0.4, preventing the user from zooming beyond showing a minimum of 40% of the full chart.

zoom: {
    minXRatio: 0.4,
    minYRatio: 0.4,
}

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.

API Reference

interface AgCartesianChartOptions {
  zoom?: AgZoomOptions
}

type AgZoomAxes = "x" | "y" | "xy"
type AgZoomPanKey = "alt" | "ctrl" | "meta" | "shift"
type AgZoomScrollingPivot = "pointer" | "start" | "end"

interface AgZoomOptions {
  axes?: AgZoomAxes
  enabled?: boolean
  enablePanning?: boolean
  enableScrolling?: boolean
  enableSelecting?: boolean
  minXRatio?: number
  minYRatio?: number
  panKey?: AgZoomPanKey
  scrollingStep?: number
  scrollingPivot?: AgZoomScrollingPivot
}