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:

Last updated