# Selection for Bar Chart

![](https://2543643007-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHpLji2HmId7esWiRt3%2F-LJnVtfTK3MiRk_OUg2g%2F-LJnW59MMMIlSybi5MbM%2Fezgif.com-video-to-gif%20\(5\).gif?alt=media\&token=51352f66-70a0-4b78-8653-c2ab046ef6b9)

### How to use

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

// ... create a chart instance

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

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

```javascript
chart.interaction('interval-select', {
  startEvent: {String},
  selectStyle: {Object},
  unSelectStyle: {Object},
  selectAxis: {Boolean},
  selectAxisStyle: {Object},
  cancelable: {Boolean},
  onStart: {Function}, 
  onEnd: {Function}, 
  mode: {String},
  defaultSelected: {Object}
});
```

| Name              | Type     | Default                  | Description                                                                                                                                                                                                                                                      |
| ----------------- | -------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `startEvent`      | String   | 'tap'                    | This interaction is triggered by touch or touch gesture. Optional 'touchstart' or 'tap'.                                                                                                                                                                         |
| `selectStyle`     | Object   | `{ fillOpacity: 1 }`     | Set the display style of the selected bar.                                                                                                                                                                                                                       |
| `unSelectStyle`   | Object   | `{ fillOpacity: 0.4 }`   | Set the display style of the unselected bar. If you don't need to set it, you can set it to `null` directly.                                                                                                                                                     |
| `selectAxis`      | Boolean  | true                     | Whether to highlight the axis label, the default is `true`. If not needed, you can choose to turn it off: `selectAxis: false`.                                                                                                                                   |
| `selectAxisStyle` | Object   | `{ fontWeight: 'bold' }` | Set the style for axis label which its bar is selected. Only works if `selectAxis` is true.                                                                                                                                                                      |
| `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 end event is triggered.                                                                                                                                                                                                                   |
| `mode`            | String   | 'shape'                  | The default is 'shape', that is, hitting the bar will trigger the interaction. Another optional value is 'range', which means that the selected interaction is triggered as long as the concentration point falls within a certain x-direction range of the bar. |
| `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>. </p><p><strong>If you need to use this property, please call the method after the <code>chart.render()</code> .</strong> </p>            |

#### `onStart` callback

```javascript
/**
 * @param {Object} ev
 */ 
onStart(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;
}
```

#### `onEnd` callback <a href="#onend-callback" id="onend-callback"></a>

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

<https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/selection-for-bar-chart.html>