React ChartsScrollbar

Enterprise

The Scrollbar provides an intuitive control for panning when fixed width bars require more space than the series area, or when zoom is applied with the State API or Zoom functionality.

Simple Scrollbar Copy Link

The Scrollbar is disabled by default. Use scrollbar.enabled to enable.

{
    scrollbar: {
        enabled: true,
    },
}

Vertical and Horizontal Scrollbars Copy Link

Both vertical and horizontal Scrollbars are shown when necessary.

Any options supplied on the top-level scrollbar object apply to both orientations unless they are overridden within the specific horizontal or vertical configuration.

Position Copy Link

Both horizontal and vertical Scrollbars can be positioned on either side of the chart with the position property.

{
    scrollbar: {
        enabled: true,
        vertical: {
            position: 'right',
        },
    },
}

In the above example:

Set 'left' or 'right' positions for the vertical Scrollbar.
Set 'top' or 'bottom' positions for the horizontal Scrollbar.
By default, position matches the primary axis for each direction.

Placement and Spacing Copy Link

The placement property determines where the Scrollbar appears within the axis layout.

{
    scrollbar: {
        enabled: true,
        placement: 'inner',
        spacing: 0,
        tickSpacing: 0,
    },
}

In the above example:

Use the buttons to change the placement option:
- 'outer' (default) - positions the scrollbar outside the axis ticks and labels, but inside title.
- 'inner' - positions the scrollbar inside the ticks and labels, but outside the series area.
Use the sliders to change the spacing between elements:
- The spacing value controls the gap between the Scrollbar and the series area or axis labels.
- The tickSpacing value controls the gap between axis ticks and an inner Scrollbar.

Customisation Copy Link

Use the track and thumb properties to style the Scrollbar components.

{
    scrollbar: {
        enabled: true,
        thickness: 12,
        track: {
            fill: '#e2e8f0',
            cornerRadius: 0,
            strokeWidth: 0,
        },
        thumb: {
            fill: '#3b82f6',
            cornerRadius: 0,
            strokeWidth: 1,
            stroke: '#2563eb',
            hoverStyle: {
                fill: '#2563eb',
            },
        },
    },
}

In this configuration:

thickness sets the height of horizontal scrollbars or width of vertical scrollbars.
track styles the background area of the Scrollbar.
thumb styles the draggable indicator showing the current position.
thumb.hoverStyle customises the thumb colour on hover.

Both track and thumb support standard fill, stroke and corner radius options.

See API Reference for more details.

Interactivity Copy Link

The Scrollbar track mirrors native scrollbar behaviour:

Clicking the track pages the thumb by one viewport width towards the click position.
Holding the mouse button down repeats the page increment automatically.
Shift+Click jumps the thumb so the click is centred within the thumb.
On touch devices, consider increasing scrollbar.thickness to provide a more comfortable target for dragging.
The Scrollbars are fully accessible with keyboard navigation and screen readers automatically supported.

Visibility Copy Link

When enabled, the Scrollbar is shown automatically when the data exceeds the available space. Use the visible property to override this behaviour.

{
    scrollbar: {
        enabled: true,
        visible: 'always',
    },
}

In this example:

'auto' (default) - shows the Scrollbar only when the data does not fit within the viewport.
'always' - always shows the Scrollbar.
'never' - hides the Scrollbar even when it is needed.

Getting started

Core features

Specialised Charts

Series

Gauges