Vue 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.
• Clicking and dragging to pan around the zoomed in chart.
• 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: {
    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',
}

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
}