React Chart - scrollBar

Specifies the settings of the scroll bar.

Type:

Object

The scroll bar allows a user to pan the chart. To use it, you need to enable zooming and panning in your chart.

By default, the scroll bar is hidden. To make it visible, set the visible field of the scrollBar object to true. Using other fields of this object you can adjust the scroll bar appearance settings, including color, width and opacity.

View Demo

color

Specifies the color of the scroll bar.

Type:

String

Default Value: 'gray'

This option supports the following colors:

offset

Specifies the spacing between the scroll bar and the chart's plot in pixels.

Type:

Number

Default Value: 5

opacity

Specifies the opacity of the scroll bar.

Type:

Number

Default Value: undefined

position

Specifies the position of the scroll bar in the chart.

Type:

String

Default Value: 'top'
Accepted Values: 'bottom' | 'left' | 'right' | 'top'

Depending on whether the chart is rotated or not, this option accepts different values. In a non-rotated chart, you can assign either 'top' or 'bottom' to this option. In a rotated chart, this option accepts either 'left' or 'right'.

visible

Specifies whether the scroll bar is visible or not.

Type:

Boolean

Default Value: false

NOTE
Making the scroll bar visible can be useful only if panning is enabled in your chart.

width

Specifies the width of the scroll bar in pixels.

Type:

Number

Default Value: 10