JavaScript ChartsScrollbar

The Scrollbar provides a familiar interface for panning around a chart, similar to native browser and operating system scrollbars.

Unlike the Navigator, which allows both zooming and panning with resize handles, the Scrollbar is a pure panning control. This makes it ideal for users who are already zoomed in and need to navigate through their data.

Enabling the Scrollbar Copy Link

The Scrollbar is disabled by default. To enable it, add the following configuration:

{
    scrollbar: {
        enabled: true,
    },
}

The Scrollbar appears when the chart is zoomed in. Use the Zoom feature to enable zooming, or set the initial zoom level using the Chart State API.

Visibility Copy Link

The visible property controls when the Scrollbar is displayed:

• 'auto' (default) - shows the Scrollbar only when zoomed in
• 'always' - always shows the Scrollbar
• 'never' - hides the Scrollbar even when zoomed in

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

Vertical Scrollbar Copy Link

By default, the Scrollbar appears horizontally at the bottom of the chart. A vertical Scrollbar can be configured for the y-axis.

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

The position can be set to 'left' or 'right' for vertical scrollbars, and 'top' or 'bottom' for horizontal scrollbars.

Placement Copy Link

The placement property determines whether the Scrollbar appears inside or outside the chart area:

• 'outer' (default) - positions the Scrollbar outside the chart, reserving space in the layout
• 'inner' - overlays the Scrollbar on top of the chart area

{
    scrollbar: {
        enabled: true,
        placement: 'inner',
    },
}

Customisation Copy Link

The Scrollbar's appearance can be customised through its track and thumb properties.

{
    scrollbar: {
        enabled: true,
        thickness: 16,
        track: {
            fill: '#e0e0e0',
            cornerRadius: 8,
        },
        thumb: {
            fill: '#666666',
            cornerRadius: 8,
        },
    },
}

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 viewport position

Both track and thumb support standard fill and stroke options including fill, stroke, fillOpacity, strokeWidth, and cornerRadius.

API Reference Copy Link