# Selection for Pie Chart

![](/files/-LJhlWFe-0WbiwqHvd9g)

### How to use

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

// ... create a chart instance

// call the interaction
chart.interaction('pie-select');
```

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

```javascript
chart.interaction('pie-select', {
  startEvent: {String},
  animate: {Boolean} / {Object},
  offset: {Number},
  appendRadius: {Number},
  style: {Object},
  cancelable: {Boolean},
  onStart: {Function},
  onEnd: {Function},
  defaultSelected: {Object}
});
```

| Name              | Type             | Default                | Desc                                                                                                                                                                                                                                                                                                                                                                             |
| ----------------- | ---------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `startEvent`      | String           | 'tap'                  | This interaction is triggered  by touch or touch gesture. Optional 'touchstart' or 'tap'.                                                                                                                                                                                                                                                                                        |
| `animate`         | Boolean / Object | false                  | <p>Animation configuration, defaults to false, which can be turned on by setting this property to true. Used for animation configuration when it is of type Object:</p><p><code>animate: {</code></p><p>  <code>duration: 1000,</code></p><p>  <code>delay: 10,</code></p><p>  <code>easing: 'bounceOut'</code></p><p><code>}</code></p>                                         |
| `offset`          | Number           | 1                      | The distance between the halo and the pie chart that appears after selection.                                                                                                                                                                                                                                                                                                    |
| `appendRadius`    | Number           | 8                      | The axial length of the halo that appears after selection.                                                                                                                                                                                                                                                                                                                       |
| `style`           | Object           | `{ fillOpacity: 0.5 }` | The style configuration for halo.                                                                                                                                                                                                                                                                                                                                                |
| `cancelable`      | Boolean          | true                   | After the shape is selected, click again to allow unchecked. The default is true, indicating that it will be unchecked.                                                                                                                                                                                                                                                          |
| `onStart`         | Function         | null                   | The callback after the start event is triggered.                                                                                                                                                                                                                                                                                                                                 |
| `onEnd`           | Function         | null                   | The callback after the event('touchend') is triggered.                                                                                                                                                                                                                                                                                                                           |
| `defaultSelected` | Object           | null                   | <p>If you want shape to be selected when chart inited, you can pass in the shape value to <code>defaultSelected</code>, see <a href="https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/selection-for-pie-chart.html">demo</a>. </p><p><strong>If you need to use this property</strong>, <strong>please call the method after the <code>chart.render()</code> .</strong></p> |

#### `onEnd` callback

```javascript
/**
 * @param {Object} ev
 */ 
onEnd(ev) {
  // ev.data: Object, dataset of the selected shape
  // ev.shapeInfo: Object, information of the selected shape
  // ev.shape: Shape, the selected shape
  // ev.selected: the status of the current shape
  const { data, shapeInfo, shape, selected } = ev;
}
```

### Demo

url: <https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/selection-for-pie-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/selection-for-pie-chart.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.