# Pinch

![](https://2543643007-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHpLji2HmId7esWiRt3%2F-LJnVtfTK3MiRk_OUg2g%2F-LJnYZt0AZ9xoXgRo0E4%2Fezgif.com-video-to-gif%20\(1\).gif?alt=media\&token=86275110-ece6-4dc5-9b19-50d3a4e944a1)

Based on `pinch`  gesture( from [Hammer.js](http://hammerjs.github.io/recognizer-pinch/)), 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/pinch'); // require the interaction

// ... create a chart instance

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

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

```javascript
chart.interaction('pinch', {
  mode: {String}, 
  minScale: {Number}, 
  maxScale: {Number},
  pressThreshold: {Number},
  pressTime: {Object},
  onStart: {Function},
  onProcess: {Function},
  onEnd: {Function}
});
```

| Name             | Type     | Default   | Description                                                                                       |
| ---------------- | -------- | --------- | ------------------------------------------------------------------------------------------------- |
| `mode`           | String   | 'x'       | The direction of pinch, can be 'x', 'y' or 'xy'. The default value is 'x'.                        |
| `minScale`       | Number   | 1 or null | Set the minimum scale. Linear data default value is 1, cat or timeCat data default value is null. |
| `maxScale`       | Number   | 4 or null | Set the maximum scale. Linear data default value is 4, cat or timeCat data default value is null. |
| `pressThreshold` | Number   | 9         | Minimal movement that is allowed while pressing. Press will trigger tooltip.                      |
| `pressTime`      | Number   | 251       | Minimal press time in ms.                                                                         |
| `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

* [pinch on x-axis](https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pinch-and-pan-for-smooth-line.html)
* [pinch on xy-axis](https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pinch-and-pan-for-scatter-chart.html)
* [pinch for time type data](https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pinch-and-pan-for-line-chart.html)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://antv.gitbook.io/f2/api/chart/interaction/pinch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.