> For the complete documentation index, see [llms.txt](https://antv.gitbook.io/f2/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://antv.gitbook.io/f2/api/chart/interaction/pan.md).

# Pan

![](/files/-LJnWY-42o9Q3xf7SNZe)

Based on `pan`  gesture( from [Hammer.js](http://hammerjs.github.io/recognizer-pan/)), it also provides `press`  gesture to trigger the interaction of the tooltip.

### How to use

```javascript
const F2 = require('@antv/f2/lib/index'); // require F2
require('@antv/f2/lib/interaction/pan'); // require the interaction

// ... create a chart instance

// call the interaction, should be call before chart.render()
chart.interaction('pan');
```

### Configuration options <a href="#configuration-options" id="configuration-options"></a>

```javascript
chart.interaction('pan', {
  mode: {String}, 
  panThreshold: {Number}, 
  pressThreshold: {Number},
  pressTime: {Number},
  limitRange: {Object},
  onStart: {Function},
  onProcess: {Function},
  onEnd: {Function}
});
```

| Name             | Type     | Default                                          | Description                                                                                                                                                                                                                                                                                                                                           |
| ---------------- | -------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mode`           | String   | 'x'                                              | The direction of pan, can be 'x', 'y' or 'xy'. The default value is 'x'.                                                                                                                                                                                                                                                                              |
| `panThreshold`   | Number   | 10                                               | Minimal pan distance required before recognizing.                                                                                                                                                                                                                                                                                                     |
| `pressThreshold` | Number   | 9                                                | Minimal movement that is allowed while pressing. press will trigger tooltip.                                                                                                                                                                                                                                                                          |
| `pressTime`      | Number   | 251                                              | Minimal press time in ms.                                                                                                                                                                                                                                                                                                                             |
| `limitRange`     | Object   | Automatic calculation based on the range of data | <p>The maximum and minimum range used to set the chart, needs to correspond to the data field corresponding to the x or y axis. Use the following: </p><p><code>limitRange: {</code> </p><p>    <code>fieldA: {</code> </p><p>        <code>min: 0,</code> </p><p>        <code>max: 100</code> </p><p>    <code>}</code> </p><p><code>}</code>  </p> |
| `onStart`        | Function | null                                             | The callback after the start event is triggered.                                                                                                                                                                                                                                                                                                      |
| `onPress`        | Function | null                                             | The callback after the process event is triggered.                                                                                                                                                                                                                                                                                                    |
| `onEnd`          | Function | null                                             | The callback after the end event is triggered.                                                                                                                                                                                                                                                                                                        |

### Demo

* [pan for line chart](https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pan-for-line-chart.html)
* [pan for bar chart](https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pan-for-bar-chart.html)
* [pinch and pan for scatter chart](https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pinch-and-pan-for-scatter-chart.html)