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

How to Register ScrollBar Plugin

1
const F2 = require('@antv/f2/lib/index');
2
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
3
4
// register ScrollBar
5
F2.Chart.plugins.register(ScrollBar);
6
7
// another way for register ScrollBar
8
const chart = new F2.Chart({
9
id: 'canvas',
10
plugins: ScrollBar
11
});
Copied!
After register the ScrollBar, the method `chart.scrollBar()` can be called.
1
chart.scrollBar({
2
// some configuration
3
});
Copied!

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:
1
{
2
backgroundColor: 'rgba(202, 215, 239, .2)',
3
fillerColor: 'rgba(202, 215, 239, .5)',
4
size: 4,
5
lineCap: 'round',
6
offsetX: 0,
7
offsetY: 8
8
}
Copied!
  • yStyle default value:
1
{
2
backgroundColor: 'rgba(202, 215, 239, .2)',
3
fillerColor: 'rgba(202, 215, 239, .5)',
4
size: 4,
5
lineCap: 'round',
6
offsetX: 8,
7
offsetY: 0
8
}
Copied!
Example:
Last modified 3yr ago