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

# Scrollbar

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

## Simple Scrollbar

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

#### Scrollbar

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const ChartExample = () => {
  const [options, setOptions] = useState<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,
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

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

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

## Vertical and Horizontal Scrollbars

Both vertical and horizontal Scrollbars are shown when necessary.

#### Vertical Scrollbar

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const ChartExample = () => {
  const [options, setOptions] = useState<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",
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

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

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AreaSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

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

const ChartExample = () => {
  const [options, setOptions] = useState<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 },
      },
    },
  });

  const setVerticalPosition = (value: "left" | "right") => {
    const nextOptions = clone(options);

    nextOptions.scrollbar = {
      ...nextOptions.scrollbar,
      vertical: {
        ...nextOptions.scrollbar!.vertical,
        position: value,
      },
    };

    setOptions(nextOptions);
  };

  const setHorizontalPosition = (value: "top" | "bottom") => {
    const nextOptions = clone(options);

    nextOptions.scrollbar = {
      ...nextOptions.scrollbar,
      horizontal: {
        ...nextOptions.scrollbar!.horizontal,
        position: value,
      },
    };

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <label>Vertical:</label>
          <button onClick={() => setVerticalPosition("left")}>Left</button>
          <button onClick={() => setVerticalPosition("right")}>Right</button>
          <label className="gap-left">Horizontal:</label>
          <button onClick={() => setHorizontalPosition("top")}>Top</button>
          <button onClick={() => setHorizontalPosition("bottom")}>
            Bottom
          </button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

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

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgScrollbarPlacement,
  BarSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

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 ChartExample = () => {
  const [options, setOptions] = useState<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,
    },
  });

  const setPlacement = (value: AgScrollbarPlacement) => {
    const nextOptions = clone(options);

    placement = value;
    nextOptions.scrollbar!.placement = value;

    updateTickSpacingEnabled();

    setOptions(nextOptions);
  };

  const setSpacing = (event: any) => {
    const nextOptions = clone(options);

    const value = +event.target.value;
    nextOptions.scrollbar!.spacing = value;

    document.getElementById("spacingValue")!.innerHTML = String(value);

    setOptions(nextOptions);
  };

  const setTickSpacing = (event: any) => {
    const nextOptions = clone(options);

    const value = +event.target.value;
    nextOptions.scrollbar!.tickSpacing = value;

    document.getElementById("tickSpacingValue")!.innerHTML = String(value);

    setOptions(nextOptions);
  };

  const setTicksEnabled = (enabled: boolean) => {
    const nextOptions = clone(options);

    ticksEnabled = enabled;
    (nextOptions.axes as any).x.tick.enabled = enabled;

    updateTickSpacingEnabled();

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <label>Placement:</label>
          <button onClick={() => setPlacement("outer")}>Outer</button>
          <button onClick={() => setPlacement("inner")}>Inner</button>
        </div>
        <div className="controls-row">
          <label htmlFor="spacingSlider">spacing:</label>
          <input
            type="range"
            id="spacingSlider"
            min="0"
            max="25"
            defaultValue="0"
            onInput={(event) => setSpacing(event)}
            onChange={(event) => setSpacing(event)}
          />
          <span
            id="spacingValue"
            style={{
              display: "inline-block",
              minWidth: "3ch",
              textAlign: "right",
            }}
          >
            0
          </span>
          <fieldset id="tickSpacingGroup" className="control-group" disabled="">
            <label htmlFor="tickSpacingSlider" className="gap-left">
              tickSpacing:
            </label>
            <input
              type="range"
              id="tickSpacingSlider"
              min="0"
              max="25"
              defaultValue="0"
              onInput={(event) => setTickSpacing(event)}
              onChange={(event) => setTickSpacing(event)}
            />
            <span
              id="tickSpacingValue"
              style={{
                display: "inline-block",
                minWidth: "3ch",
                textAlign: "right",
              }}
            >
              0
            </span>
          </fieldset>
          <input
            type="checkbox"
            id="ticksEnabled"
            className="gap-left"
            onChange={(event) => setTicksEnabled(event.target.checked)}
          />
          <label htmlFor="ticksEnabled">Enable Ticks</label>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

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

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const ChartExample = () => {
  const [options, setOptions] = useState<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",
        },
      },
    },
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

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

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

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

const ChartExample = () => {
  const [options, setOptions] = useState<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",
      },
    },
  });

  const setSeriesAreaScrolling = (enabled: boolean) => {
    const nextOptions = clone(options);

    nextOptions.scrollbar!.enableSeriesAreaScrolling = enabled;

    setOptions(nextOptions);
  };

  const setAxisScrolling = (enabled: boolean) => {
    const nextOptions = clone(options);

    nextOptions.scrollbar!.enableAxisScrolling = enabled;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <label>Axis Scrolling:</label>
          <button onClick={() => setAxisScrolling(true)}>Enable</button>
          <button onClick={() => setAxisScrolling(false)}>Disable</button>
          <label>Series Area Scrolling:</label>
          <button onClick={() => setSeriesAreaScrolling(true)}>Enable</button>
          <button
            className="gap-right"
            onClick={() => setSeriesAreaScrolling(false)}
          >
            Disable
          </button>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

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

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  AgScrollbarVisibility,
  BarSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

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

const ChartExample = () => {
  const [options, setOptions] = useState<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",
    },
  });

  const setVisibility = (value: AgScrollbarVisibility) => {
    const nextOptions = clone(options);

    nextOptions.scrollbar!.visible = value;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <label htmlFor="visibility">Visibility:</label>
          <select
            id="visibility"
            onChange={(event) => setVisibility(event.target.value)}
          >
            <option value="always">always</option>
            <option value="auto">auto</option>
            <option value="never">never</option>
          </select>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

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