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:
- Tap the series area to show tooltips and crosshairs.
- Tap or double-tap to toggle a legend item, reset zoom, or press any of the UI buttons.
- Any click and double-click events are also triggered by a tap or double-tap.
- Long tap to bring up the context menu.
- Drag to zoom the axes, pan a zoomed chart, or interact with annotations.
- Use two finger pinch gestures to zoom in or out of a chart, and two finger drag to pan a zoomed chart.
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.
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.
zoom: {
enableTwoFingerZoom: true | false ,
}
Long Tap Copy
Long Tapping the chart will open the Context Menu, if available.