> 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/selection-for-pie-chart.md).

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