Vue Chart - zoomAndPan

Configures zooming and panning.

Selector: DxZoomAndPan
Type:

Object

You can enable zooming and panning for the argument and value axes independently. Set the argumentAxis and valueAxis properties to enable zooming, panning, or both for a specific axis.

Users can use the mouse and touch gestures to zoom and pan. The following table illustrates user interaction:

Device Zooming Gestures Panning Gestures
Touch-enabled Spread and pinch Vertical or horizontal drag
Mouse-equipped Mouse Wheel Vertical or horizontal drag

You can use the allowTouchGestures or allowMouseWheel property to disable touch or mouse support.

Users can also use the mouse to zoom the chart by selecting an area with the drag gesture. Refer the dragToZoom property for more information.

Zooming and panning are related to the visual/whole range concept. Refer to the Visual and Whole Ranges article for more information.

View Demo

See Also

allowMouseWheel

Specifies whether users can use the mouse wheel to zoom the chart. Applies only if zoom is allowed for the argument or value axis.

Selector: allow-mouse-wheel
Type:

Boolean

Default Value: true

allowTouchGestures

Specifies whether users can use touch gestures to zoom or pan the chart. Applies only if zoom and pan are allowed for the argument or value axis.

Selector: allow-touch-gestures
Type:

Boolean

Default Value: true

Users can use the spread and pinch gestures to zoom in and out, and the vertical and horizontal drag gestures to pan the chart.

argumentAxis

Specifies whether users are allowed to zoom and/or pan the argument axis.

Selector: argument-axis
Default Value: 'none'

dragBoxStyle

Configures the box that appears when users zoom the chart by selecting an area with the drag gesture. Applies only if dragToZoom is true.

Selector: DxDragBoxStyle
Type:

Object

DevExtreme Chart - Drag Box

dragToZoom

Enables users to zoom the chart by selecting an area with the drag gesture. Applies only on devices that use a mouse.

Selector: drag-to-zoom
Type:

Boolean

Default Value: false

When this property is set to true, the mouse's drag gesture is used for zooming instead of panning. To pan in this case, users should perform the drag gesture while pressing the panKey.

View Demo

See Also

panKey

Specifies the key that enables panning when dragToZoom is true. Applies only on devices that use a mouse.

Selector: pan-key
Default Value: 'shift'

NOTE
The Meta key depends on the keyboard: the Command key (⌘) on Macintosh keyboards; the Windows key (⊞) on Windows keyboards.

valueAxis

Specifies whether users are allowed to zoom and/or pan the value axis.

Selector: value-axis
Default Value: 'none'