---
title: "Scrollbar"
enterprise: true
framework: angular
version: "14.1.0"
---

# Scrollbar

The Scrollbar provides an intuitive control for panning when [fixed width bars](https://www.ag-grid.com/charts/angular/bars/#fixed-width) require more space than the series area, or when zoom is applied with the [State API](https://www.ag-grid.com/charts/angular/api-state/) or [Zoom](https://www.ag-grid.com/charts/angular/zoom/) functionality.

## Simple Scrollbar

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

#### Scrollbar

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Scrollbar](https://www.ag-grid.com/charts/angular/scrollbar/examples/scrollbar)

```js
{
    scrollbar: {
        enabled: true,
    },
}
```

## Vertical and Horizontal Scrollbars

Both vertical and horizontal Scrollbars are shown when necessary.

#### Vertical Scrollbar

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Vertical Scrollbar](https://www.ag-grid.com/charts/angular/scrollbar/examples/vertical-scrollbar)

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

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

#### Scrollbar Position

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Scrollbar Position](https://www.ag-grid.com/charts/angular/scrollbar/examples/scrollbar-position)

```js
{
    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

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

#### Scrollbar Placement

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Scrollbar Placement](https://www.ag-grid.com/charts/angular/scrollbar/examples/scrollbar-placement)

```js
{
    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

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

#### Scrollbar Styling

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Scrollbar Styling](https://www.ag-grid.com/charts/angular/scrollbar/examples/scrollbar-styling)

```js
{
    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](#api-reference) for more details.

## Interactivity

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.
- Scrolling over the Scrollbar track pans the viewport in the corresponding direction.
- 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.

## Scrolling

Scrolling over the Scrollbar track always pans the viewport. Scrolling over the series area also pans the chart by default.

Set `enableAxisScrolling` to `true` to extend scrolling to the axis areas, and set `enableSeriesAreaScrolling` to `false` to disable series area scrolling.

#### Scrollbar Scrolling

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Scrollbar Scrolling](https://www.ag-grid.com/charts/angular/scrollbar/examples/scrollbar-scrolling)

In this example:

- `enableAxisScrolling` controls whether scrolling over the axis pans in that direction.
- `enableSeriesAreaScrolling` controls whether scrolling within the series area pans the chart.
- If [Zoom](https://www.ag-grid.com/charts/angular/zoom/) is also enabled, its scroll interactions take precedence.

## Visibility

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

#### Scrollbar Visibility

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Scrollbar Visibility](https://www.ag-grid.com/charts/angular/scrollbar/examples/scrollbar-visibility)

```js
{
    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.

## API Reference

#### Scrollbar

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| enableAxisScrolling | boolean | false | Whether scrolling on the axis should scroll the scrollbar. |
| enableSeriesAreaScrolling | boolean | true | Whether scrolling on the series area should scroll the scrollbar. |
| horizontal | AgScrollbarHorizontalOrientationOptions |  | Options applied to the horizontal scrollbar. |
| horizontal.position | 'top' \| 'bottom' |  | Which horizontal axis position the scrollbar should use. |
| horizontal.enabled | boolean |  | Set to `true` to enable the scrollbar. |
| horizontal.thickness | number |  | Thickness of the scrollbar in pixels (height for horizontal, width for vertical). |
| horizontal.spacing | number |  | Spacing in pixels between the scrollbar and the series area or axis labels, depending on placement. |
| horizontal.tickSpacing | number |  | Spacing in pixels between ticks on the scrollbar (if applicable). |
| horizontal.track | AgScrollbarTrackStyle |  | Styling options for the scrollbar track. |
| horizontal.track.cornerRadius | PixelSize |  | Apply rounded corners. |
| horizontal.track.opacity | number |  | The opacity for the scrollbar element. |
| horizontal.track.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| horizontal.track.fillOpacity | Opacity |  | The opacity of the fill colour. |
| horizontal.track.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| horizontal.track.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| horizontal.track.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| horizontal.track.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| horizontal.track.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| horizontal.thumb | AgScrollbarThumbStyle |  | Styling options for the scrollbar thumb. |
| horizontal.thumb.minSize | number |  | Minimum size of the thumb in pixels |
| horizontal.thumb.hoverStyle | AgScrollbarThumbHoverStyle |  | Styling applied to the thumb on hover. |
| horizontal.thumb.hoverStyle.fill | FillOptions['fill'] |  | The colour for the hovered thumb fill. |
| horizontal.thumb.hoverStyle.fill.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| horizontal.thumb.hoverStyle.fill.fillOpacity | Opacity |  | The opacity of the fill colour. |
| horizontal.thumb.hoverStyle.stroke | StrokeOptions['stroke'] |  | The colour for the hovered thumb stroke. |
| horizontal.thumb.hoverStyle.stroke.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| horizontal.thumb.hoverStyle.stroke.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| horizontal.thumb.hoverStyle.stroke.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| horizontal.thumb.cornerRadius | PixelSize |  | Apply rounded corners. |
| horizontal.thumb.opacity | number |  | The opacity for the scrollbar element. |
| horizontal.thumb.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| horizontal.thumb.fillOpacity | Opacity |  | The opacity of the fill colour. |
| horizontal.thumb.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| horizontal.thumb.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| horizontal.thumb.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| horizontal.thumb.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| horizontal.thumb.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| horizontal.visible | 'auto' \| 'always' \| 'never' |  | Controls when the scrollbar is shown. |
| horizontal.placement | 'inner' \| 'outer' |  | Controls whether the scrollbar is placed inside the axis label and ticks or outside. |
| vertical | AgScrollbarVerticalOrientationOptions |  | Options applied to the vertical scrollbar. |
| vertical.position | 'left' \| 'right' |  | Which vertical axis position the scrollbar should use. |
| vertical.enabled | boolean |  | Set to `true` to enable the scrollbar. |
| vertical.thickness | number |  | Thickness of the scrollbar in pixels (height for horizontal, width for vertical). |
| vertical.spacing | number |  | Spacing in pixels between the scrollbar and the series area or axis labels, depending on placement. |
| vertical.tickSpacing | number |  | Spacing in pixels between ticks on the scrollbar (if applicable). |
| vertical.track | AgScrollbarTrackStyle |  | Styling options for the scrollbar track. |
| vertical.track.cornerRadius | PixelSize |  | Apply rounded corners. |
| vertical.track.opacity | number |  | The opacity for the scrollbar element. |
| vertical.track.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| vertical.track.fillOpacity | Opacity |  | The opacity of the fill colour. |
| vertical.track.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| vertical.track.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| vertical.track.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| vertical.track.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| vertical.track.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| vertical.thumb | AgScrollbarThumbStyle |  | Styling options for the scrollbar thumb. |
| vertical.thumb.minSize | number |  | Minimum size of the thumb in pixels |
| vertical.thumb.hoverStyle | AgScrollbarThumbHoverStyle |  | Styling applied to the thumb on hover. |
| vertical.thumb.hoverStyle.fill | FillOptions['fill'] |  | The colour for the hovered thumb fill. |
| vertical.thumb.hoverStyle.fill.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| vertical.thumb.hoverStyle.fill.fillOpacity | Opacity |  | The opacity of the fill colour. |
| vertical.thumb.hoverStyle.stroke | StrokeOptions['stroke'] |  | The colour for the hovered thumb stroke. |
| vertical.thumb.hoverStyle.stroke.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| vertical.thumb.hoverStyle.stroke.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| vertical.thumb.hoverStyle.stroke.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| vertical.thumb.cornerRadius | PixelSize |  | Apply rounded corners. |
| vertical.thumb.opacity | number |  | The opacity for the scrollbar element. |
| vertical.thumb.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| vertical.thumb.fillOpacity | Opacity |  | The opacity of the fill colour. |
| vertical.thumb.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| vertical.thumb.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| vertical.thumb.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| vertical.thumb.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| vertical.thumb.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| vertical.visible | 'auto' \| 'always' \| 'never' |  | Controls when the scrollbar is shown. |
| vertical.placement | 'inner' \| 'outer' |  | Controls whether the scrollbar is placed inside the axis label and ticks or outside. |
| enabled | boolean |  | Set to `true` to enable the scrollbar. |
| thickness | number |  | Thickness of the scrollbar in pixels (height for horizontal, width for vertical). |
| spacing | number |  | Spacing in pixels between the scrollbar and the series area or axis labels, depending on placement. |
| tickSpacing | number |  | Spacing in pixels between ticks on the scrollbar (if applicable). |
| track | AgScrollbarTrackStyle |  | Styling options for the scrollbar track. |
| track.cornerRadius | PixelSize |  | Apply rounded corners. |
| track.opacity | number |  | The opacity for the scrollbar element. |
| track.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| track.fillOpacity | Opacity |  | The opacity of the fill colour. |
| track.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| track.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| track.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| track.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| track.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| thumb | AgScrollbarThumbStyle |  | Styling options for the scrollbar thumb. |
| thumb.minSize | number |  | Minimum size of the thumb in pixels |
| thumb.hoverStyle | AgScrollbarThumbHoverStyle |  | Styling applied to the thumb on hover. |
| thumb.hoverStyle.fill | FillOptions['fill'] |  | The colour for the hovered thumb fill. |
| thumb.hoverStyle.fill.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| thumb.hoverStyle.fill.fillOpacity | Opacity |  | The opacity of the fill colour. |
| thumb.hoverStyle.stroke | StrokeOptions['stroke'] |  | The colour for the hovered thumb stroke. |
| thumb.hoverStyle.stroke.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| thumb.hoverStyle.stroke.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| thumb.hoverStyle.stroke.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| thumb.cornerRadius | PixelSize |  | Apply rounded corners. |
| thumb.opacity | number |  | The opacity for the scrollbar element. |
| thumb.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| thumb.fillOpacity | Opacity |  | The opacity of the fill colour. |
| thumb.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| thumb.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| thumb.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| thumb.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| thumb.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| visible | 'auto' \| 'always' \| 'never' |  | Controls when the scrollbar is shown. |
| placement | 'inner' \| 'outer' |  | Controls whether the scrollbar is placed inside the axis label and ticks or outside. |