Vue ChartsTouch

AG Charts implements touch and multi-touch support, enabling interactivity across all devices.

Touch Options Copy

All interactivity is available via touch input.

For example:

Single Finger Touch Dragging Copy

By default, Single Finger Touch Drag events are handled like mouse drag events. To change the input handling behaviour of these events, use touch.dragAction.

Drag Single Touch Drag Single Touch
touch: {
    dragAction: 'drag' | 'hover' | 'none' ,
}

In this example:

  • dragAction: 'none' disables the chart's Single Finger input handling, scrolling the entire page.
  • dragAction: 'drag' emulates mouse dragging, panning the viewport if possible.
  • dragAction: 'hover' emulates mouse movements, updating the tooltip and highlighted node.

Two Finger Zoom-Pan Copy

By default, charts use two finger gestures to zoom and pan. To pass this gesture to the underlying page, set enableTwoFingerZoom: false.

Drag Single Touch Drag Single Touch
zoom: {
    enableTwoFingerZoom: true | false ,
}

Long Tap Copy

Long Tapping the chart will open the Context Menu, if available.

Long Tap Long Tap

API Reference Copy