AG Charts implements touch and multi-touch support, enabling interactivity across all devices.
Touch Options
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
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: 'hover',
}
In this example:
dragAction: 'none'
disables the chart's Single Finger input handling, scrolling the entire page.dragAction: 'drag'
emulates mouse dragging, updating the view's pan.dragAction: 'hover'
emulates mouse movements, updating the tooltip & highlighted node.
When emulating mouse dragging, Touch event will page through if Zoom is disabled or if the chart cannot be panned.
Two Finger Zoom-Pan
By default, charts with the Zoom feature enabled still update the viewport's zoom and pan when using two fingers. To disable, use enableTwoFingerZoom: false
.
Long Tap
Long Tapping the chart will expand the Context Menu, if available.