# ScrollBar

![](https://2543643007-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHpLji2HmId7esWiRt3%2F-LJrgD3NvN3lXsC0rYaL%2F-LJrh2sza9pk3jSS8QwZ%2Fimage.png?alt=media\&token=7b726b39-9ce2-4333-8d1e-04f85f689419)

ScrollBar is a plugin for pan and pinch interaction, it will show the current data range.

### How to Register ScrollBar Plugin

```javascript
const F2 = require('@antv/f2/lib/index');
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');

// register ScrollBar
F2.Chart.plugins.register(ScrollBar); 

// another way for register ScrollBar
const chart = new F2.Chart({
  id: 'canvas',
  plugins: ScrollBar
});
```

After register the ScrollBar, the method \`chart.scrollBar()\` can be called.

```javascript
chart.scrollBar({
  // some configuration
});
```

### Configuration

| Name     | Type   | Default     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| -------- | ------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mode`   | String | 'x'         | The direction of the scroll bar, optional value includes 'x', 'y', 'xy'.                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `xStyle` | Object | `see below` | <p>The style for scroll bar in  x direction:  </p><ul><li><code>backgroundColor</code>: the background color for scroll bar</li><li><code>fillerColor</code>: the color for range bar</li><li><code>size</code>:  the size of scroll bar</li><li><code>lineCap</code>: determines how the end points in a line are drawn</li><li><code>offsetX</code>: the offset value of scroll bar in x-axis direction</li><li><code>offsetY</code>: the offset value of scroll bar in y-axis direction</li></ul> |
| `yStyle` | Obect  | see below   | <p>The style for scroll bar in y direction: </p><ul><li><code>backgroundColor</code>: the background color for scroll bar</li><li><code>fillerColor</code>: the color for range bar</li><li><code>size</code>: the size of scroll bar</li><li><code>lineCap</code>: determines how the end points in a line are drawn</li><li><code>offsetX</code>: the offset value of scroll bar in x-axis direction</li><li><code>offsetY</code>: the offset value of scroll bar in y-axis direction</li></ul>    |

* `xStyle` default value:

```javascript
{
    backgroundColor: 'rgba(202, 215, 239, .2)',
    fillerColor: 'rgba(202, 215, 239, .5)',
    size: 4,
    lineCap: 'round',
    offsetX: 0,
    offsetY: 8
}
```

* `yStyle` default value:

```javascript
{
    backgroundColor: 'rgba(202, 215, 239, .2)',
    fillerColor: 'rgba(202, 215, 239, .5)',
    size: 4,
    lineCap: 'round',
    offsetX: 8,
    offsetY: 0
}
```

Example:

* [pan for line chart](https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pan-for-line-chart.html)