---
product: "AG Charts"
title: "Touch"
description: "AG Charts implements touch and multi-touch support, enabling interactivity across all devices."
framework: angular
version: "14.2.0"
related:
    - title: "Accessibility"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/accessibility/"
    - title: "Localisation"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/localisation/"
    - title: "Series Highlighting"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/series-highlighting/"
    - title: "Tooltips"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/tooltips/"
    - title: "Animation"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/animation/"
    - title: "Context Menu"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/context-menu/"
    - title: "Crosshairs & Band Highlight"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/axes-crosshairs/"
    - title: "Data Selection"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/selection/"
    - title: "Flash On Update"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/flash-on-update/"
    - title: "Navigator"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/navigator/"
    - title: "Range Controls"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/range-controls/"
    - title: "Scrollbar"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/scrollbar/"
    - title: "Synchronization"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/sync/"
    - title: "Zoom"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/zoom/"
llms: "https://www.ag-grid.com/charts/archive/14.2.0/llms.txt"
---

# Touch

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](https://www.ag-grid.com/charts/archive/14.2.0/angular/tooltips/) and [crosshairs](https://www.ag-grid.com/charts/archive/14.2.0/angular/axes-crosshairs/).
- Tap or double-tap to [toggle a legend item](https://www.ag-grid.com/charts/archive/14.2.0/angular/legend/#series-visibility-toggling), [reset zoom](https://www.ag-grid.com/charts/archive/14.2.0/angular/zoom/#double-click-to-reset), or press any of the UI buttons.
- Any click and double-click [events](https://www.ag-grid.com/charts/archive/14.2.0/angular/events/) are also triggered by a tap or double-tap.
- Long tap to bring up the [context menu](https://www.ag-grid.com/charts/archive/14.2.0/angular/context-menu/).
- Drag to [zoom the axes](https://www.ag-grid.com/charts/archive/14.2.0/angular/zoom/#axis-zoom-controls), [pan a zoomed chart](https://www.ag-grid.com/charts/archive/14.2.0/angular/zoom/#panning), or interact with [annotations](https://www.ag-grid.com/charts/archive/14.2.0/angular/annotations/).
- Use [two finger pinch gestures](https://www.ag-grid.com/charts/archive/14.2.0/angular/zoom/#two-finger-zoom-pan) 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`.

#### Single Finger Touch Dragging

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Single Finger Touch Dragging](https://www.ag-grid.com/charts/archive/14.2.0/angular/touch/examples/single-finger-touch-dragging/)

```js
{
    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

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

#### Two Finger Zoom-Pan

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Two Finger Zoom-Pan](https://www.ag-grid.com/charts/archive/14.2.0/angular/touch/examples/two-finger-zoompan/)

```js
{
    zoom: {
        enableTwoFingerZoom: true | false,
    },
}
```

## Long Tap

Long Tapping the chart will open the [Context Menu](https://www.ag-grid.com/charts/archive/14.2.0/angular/context-menu/), if available.

#### Long Tap

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Long Tap](https://www.ag-grid.com/charts/archive/14.2.0/angular/touch/examples/long-tap/)

## API Reference

#### Touch

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| dragAction | 'none' \| 'drag' \| 'hover' | 'drag' | Sets the input handling behaviour for single-finger touch drag events.  - `'none'` - ignores these events, typically causing the default page-scrolling behaviour. - `'hover'` - makes these behave like mouse hover events, showing tooltip and crosshairs. - `'drag'` - makes these behave like mouse drag events (moving while holding left-button). |