ScrollBar is a plugin for pan and pinch interaction, it will show the current data range.
const F2 = require('@antv/f2/lib/index');const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');// register ScrollBarF2.Chart.plugins.register(ScrollBar);// another way for register ScrollBarconst chart = new F2.Chart({id: 'canvas',plugins: ScrollBar});
After register the ScrollBar, the method `chart.scrollBar()` can be called.
chart.scrollBar({// some configuration});
Name | Type | Default | Description |
| String | 'x' | The direction of the scroll bar, optional value includes 'x', 'y', 'xy'. |
| Object |
| The style for scroll bar in x direction:
|
| Obect | see below | The style for scroll bar in y direction:
|
xStyle
default value:
{backgroundColor: 'rgba(202, 215, 239, .2)',fillerColor: 'rgba(202, 215, 239, .5)',size: 4,lineCap: 'round',offsetX: 0,offsetY: 8}
yStyle
default value:
{backgroundColor: 'rgba(202, 215, 239, .2)',fillerColor: 'rgba(202, 215, 239, .5)',size: 4,lineCap: 'round',offsetX: 8,offsetY: 0}
Example: