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

# Scrollbar

The Scrollbar provides an intuitive control for panning when [fixed width bars](https://www.ag-grid.com/charts/javascript/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/javascript/api-state/) or [Zoom](https://www.ag-grid.com/charts/javascript/zoom/) functionality.

## Simple Scrollbar

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

#### Scrollbar

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  BarSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
  LegendModule,
]);

const options: AgCartesianChartOptions = {
  title: {
    text: "Museum Visitors",
  },
  subtitle: {
    text: "Fixed bar widths require panning with the scrollbar",
  },
  data: getData(),
  series: [
    {
      type: "bar",
      xKey: "date",
      yKey: "Tate Modern",
      yName: "Tate Modern",
      width: 12,
    },
    {
      type: "bar",
      xKey: "date",
      yKey: "Tate Britain",
      yName: "Tate Britain",
      width: 12,
    },
  ],
  axes: {
    x: {
      type: "ordinal-time",
      interval: { maxSpacing: 200 },
    },
    y: {
      type: "number",
      label: {
        formatter: (params) => `${params.value / 1000}k`,
      },
    },
  },
  scrollbar: {
    enabled: true,
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

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

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

## Vertical and Horizontal Scrollbars

Both vertical and horizontal Scrollbars are shown when necessary.

#### Vertical Scrollbar

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  BarSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
  LegendModule,
]);

const options: AgCartesianChartOptions = {
  title: {
    text: "Museum Visitors",
  },
  subtitle: {
    text: "Vertical Scrollbar is used when panning vertically is required",
  },
  data: getData(),
  series: [
    {
      type: "bar",
      direction: "horizontal",
      xKey: "date",
      yKey: "Tate Modern",
      yName: "Tate Modern",
      width: 12,
    },
    {
      type: "bar",
      direction: "horizontal",
      xKey: "date",
      yKey: "Tate Britain",
      yName: "Tate Britain",
      width: 12,
    },
  ],
  axes: {
    y: {
      type: "ordinal-time",
      interval: { maxSpacing: 200 },
    },
    x: {
      type: "number",
      label: {
        formatter: (params) => `${params.value / 1000}k`,
      },
    },
  },
  scrollbar: {
    enabled: true,
    vertical: {
      position: "left",
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Vertical Scrollbar](https://www.ag-grid.com/charts/typescript/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
import {
  AgCartesianChartOptions,
  AgCharts,
  AreaSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AreaSeriesModule,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
  ZoomModule,
  LegendModule,
]);

const options: AgCartesianChartOptions = {
  title: {
    text: "Museum Visitors",
  },
  data: getData(),
  series: [
    {
      type: "area",
      xKey: "date",
      yKey: "Tate Modern",
      yName: "Tate Modern",
      stacked: true,
    },
    {
      type: "area",
      xKey: "date",
      yKey: "Tate Britain",
      yName: "Tate Britain",
      stacked: true,
    },
  ],
  axes: {
    x: {
      type: "ordinal-time",
      interval: { maxSpacing: 200 },
    },
    y: {
      type: "number",
      label: {
        formatter: (params) => `${params.value / 1000}k`,
      },
    },
  },
  scrollbar: {
    enabled: true,
    vertical: {
      position: "right",
    },
  },
  initialState: {
    zoom: {
      ratioX: { start: 0.1, end: 0.5 },
      ratioY: { start: 0.2, end: 0.75 },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function setVerticalPosition(value: "left" | "right") {
  options.scrollbar = {
    ...options.scrollbar,
    vertical: {
      ...options.scrollbar!.vertical,
      position: value,
    },
  };

  chart.update(options);
}

function setHorizontalPosition(value: "top" | "bottom") {
  options.scrollbar = {
    ...options.scrollbar,
    horizontal: {
      ...options.scrollbar!.horizontal,
      position: value,
    },
  };

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).setVerticalPosition = setVerticalPosition;
  (<any>window).setHorizontalPosition = setHorizontalPosition;
}
```

[Live example: Scrollbar Position](https://www.ag-grid.com/charts/typescript/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
import {
  AgCartesianChartOptions,
  AgCharts,
  AgScrollbarPlacement,
  BarSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

let placement: AgScrollbarPlacement = "inner";
let ticksEnabled = false;
// tickSpacing only affects the layout when the scrollbar is placed 'inner' and axis ticks are enabled,
// so disable the control in every other case to make it clear it has no effect.
function updateTickSpacingEnabled() {
  const tickSpacingGroup = document.getElementById(
    "tickSpacingGroup",
  ) as HTMLFieldSetElement;
  tickSpacingGroup.disabled = !(placement === "inner" && ticksEnabled);
}
ModuleRegistry.registerModules([
  BarSeriesModule,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
  LegendModule,
]);

const options: AgCartesianChartOptions = {
  title: {
    text: "Museum Visitors",
  },
  data: getData(),
  series: [
    {
      type: "bar",
      xKey: "date",
      yKey: "Tate Modern",
      yName: "Tate Modern",
      width: 12,
    },
    {
      type: "bar",
      xKey: "date",
      yKey: "Tate Britain",
      yName: "Tate Britain",
      width: 12,
    },
  ],
  axes: {
    x: {
      type: "ordinal-time",
      title: {
        text: "Date",
      },
      tick: { enabled: false },
      interval: { maxSpacing: 200 },
    },
    y: {
      type: "number",
      label: {
        formatter: (params) => `${params.value / 1000}k`,
      },
    },
  },
  scrollbar: {
    enabled: true,
    placement: "inner",
    spacing: 0,
    tickSpacing: 0,
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
updateTickSpacingEnabled();

function setPlacement(value: AgScrollbarPlacement) {
  placement = value;
  options.scrollbar!.placement = value;

  updateTickSpacingEnabled();
  chart.update(options);
}

function setSpacing(event: any) {
  const value = +event.target.value;
  options.scrollbar!.spacing = value;

  document.getElementById("spacingValue")!.innerHTML = String(value);
  chart.update(options);
}

function setTickSpacing(event: any) {
  const value = +event.target.value;
  options.scrollbar!.tickSpacing = value;

  document.getElementById("tickSpacingValue")!.innerHTML = String(value);
  chart.update(options);
}

function setTicksEnabled(enabled: boolean) {
  ticksEnabled = enabled;
  (options.axes as any).x.tick.enabled = enabled;

  updateTickSpacingEnabled();
  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).setPlacement = setPlacement;
  (<any>window).setSpacing = setSpacing;
  (<any>window).setTickSpacing = setTickSpacing;
  (<any>window).setTicksEnabled = setTicksEnabled;
}
```

[Live example: Scrollbar Placement](https://www.ag-grid.com/charts/typescript/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
import {
  AgCartesianChartOptions,
  AgCharts,
  BarSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
  LegendModule,
]);

const options: AgCartesianChartOptions = {
  title: {
    text: "Museum Visitors",
  },
  data: getData(),
  series: [
    {
      type: "bar",
      xKey: "date",
      yKey: "Tate Modern",
      yName: "Tate Modern",
      width: 12,
    },
    {
      type: "bar",
      xKey: "date",
      yKey: "Tate Britain",
      yName: "Tate Britain",
      width: 12,
    },
  ],
  axes: {
    x: {
      type: "ordinal-time",
      position: "bottom",
    },
    y: {
      type: "number",
      label: {
        formatter: (params) => `${params.value / 1000}k`,
      },
    },
  },
  scrollbar: {
    enabled: true,
    thickness: 12,
    track: {
      fill: "#e2e8f0",
      cornerRadius: 0,
      strokeWidth: 0,
    },
    thumb: {
      fill: "#3b82f6",
      cornerRadius: 0,
      strokeWidth: 1,
      stroke: "#2563eb",
      hoverStyle: {
        fill: "#2563eb",
      },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);
```

[Live example: Scrollbar Styling](https://www.ag-grid.com/charts/typescript/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
import {
  AgCartesianChartOptions,
  AgCharts,
  BarSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
  LegendModule,
]);

const options: AgCartesianChartOptions = {
  title: {
    text: "Museum Visitors",
  },
  subtitle: {
    text: "Scroll over the series area or axis to pan the chart",
  },
  data: getData(),
  series: [
    {
      type: "bar",
      direction: "horizontal",
      xKey: "date",
      yKey: "Tate Modern",
      yName: "Tate Modern",
      width: 12,
    },
    {
      type: "bar",
      direction: "horizontal",
      xKey: "date",
      yKey: "Tate Britain",
      yName: "Tate Britain",
      width: 12,
    },
  ],
  axes: {
    y: {
      type: "ordinal-time",
      interval: { maxSpacing: 200 },
    },
    x: {
      type: "number",
      label: {
        formatter: (params) => `${params.value / 1000}k`,
      },
    },
  },
  scrollbar: {
    enabled: true,
    enableSeriesAreaScrolling: true,
    enableAxisScrolling: true,
    vertical: {
      position: "left",
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function setSeriesAreaScrolling(enabled: boolean) {
  options.scrollbar!.enableSeriesAreaScrolling = enabled;

  chart.update(options);
}

function setAxisScrolling(enabled: boolean) {
  options.scrollbar!.enableAxisScrolling = enabled;

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).setSeriesAreaScrolling = setSeriesAreaScrolling;
  (<any>window).setAxisScrolling = setAxisScrolling;
}
```

[Live example: Scrollbar Scrolling](https://www.ag-grid.com/charts/typescript/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/javascript/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
import {
  AgCartesianChartOptions,
  AgCharts,
  AgScrollbarVisibility,
  BarSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
  LegendModule,
]);

const options: AgCartesianChartOptions = {
  title: {
    text: "Museum Visitors",
  },
  data: getData(),
  series: [
    {
      type: "bar",
      xKey: "date",
      yKey: "Tate Modern",
      yName: "Tate Modern",
      width: 12,
    },
    {
      type: "bar",
      xKey: "date",
      yKey: "Tate Britain",
      yName: "Tate Britain",
      width: 12,
    },
  ],
  axes: {
    x: {
      type: "ordinal-time",
      interval: { maxSpacing: 200 },
    },
    y: {
      type: "number",
      label: {
        formatter: (params) => `${params.value / 1000}k`,
      },
    },
  },
  scrollbar: {
    enabled: true,
    visible: "always",
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function setVisibility(value: AgScrollbarVisibility) {
  options.scrollbar!.visible = value;

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).setVisibility = setVisibility;
}
```

[Live example: Scrollbar Visibility](https://www.ag-grid.com/charts/typescript/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. |