# ScrollBar

![](/files/-LJrh2sza9pk3jSS8QwZ)

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)


---

# 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/wip-scrollbar.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.