ScrollBar

ScrollBar is a plugin for pan and pinch interaction, it will show the current data range.
How to Register ScrollBar Plugin
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.
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
The style for scroll bar in  x direction:  
backgroundColor: the background color for scroll bar
fillerColor: the color for range bar
size:  the size of scroll bar
lineCap: determines how the end points in a line are drawn
offsetX: the offset value of scroll bar in x-axis direction
offsetY: the offset value of scroll bar in y-axis direction
yStyle
Obect
see below
The style for scroll bar in y direction: 
backgroundColor: the background color for scroll bar
fillerColor: the color for range bar
size: the size of scroll bar
lineCap: determines how the end points in a line are drawn
offsetX: the offset value of scroll bar in x-axis direction
offsetY: the offset value of scroll bar in y-axis 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:
​pan for line chart​
​

Pinch

Global

Last updated 2 years ago

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