# Interaction

F2 provides an interaction mechanism to achieve the encapsulation and reuse of common interaction behavior. Based on this mechanism, we provide the following four common interactions:

| Interaction             | **Demo**                                                                                                     |
| ----------------------- | ------------------------------------------------------------------------------------------------------------ |
| Selection for pie chart | ![](https://cdn-pri.nlark.com/yuque/0/2018/gif/98090/1534071471935-fb8f4e2f-64f6-4c37-ad2c-7d92866248c3.gif) |
| Selection for bar chart | ![](/files/-LJnW59MMMIlSybi5MbM)                                                                             |
| Pan                     | ![](/files/-LJnWY-42o9Q3xf7SNZe)                                                                             |
| Pinch                   | ![](https://cdn-pri.nlark.com/yuque/0/2018/gif/98090/1534071488312-ee45dbcb-13b2-43c8-955f-153ea232b1eb.gif) |

For developers, they can encapsulate their own interaction behavior based on this mechanism. For details, see the Custom Interaction Behavior(todo).

### Usage

For better package size, interaction mode is not packaged by default into @antv/f2. So we should require it.

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

// import all interations we provide
require('@antv/f2/lib/interaction/');

// If you just want to use one

// import pie chart selection interaction
require('@antv/f2/lib/interaction/pie-select');

// import bar chart selection interaction
require('@antv/f2/lib/interaction/interval-select');

// import pan interaction
require('@antv/f2/lib/interaction/pan');

// import pinch interaction
require('@antv/f2/lib/interaction/pinch');
```

> The touch gestures for interactions all base on [Hammer.js](http://hammerjs.github.io/).

* call interaction

```javascript
chart.interaction('name', config);
```

* clear interaction

```javascript
chart.clearInteraction()       // clear all interactions for current chart instance
chart.clearInteraction('name') // clear the interaction whose name is 'name'
```


---

# 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.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.