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

# Scrollbar

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

## Simple Scrollbar

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

#### Scrollbar

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  BarSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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 {
      options,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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

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

## Vertical and Horizontal Scrollbars

Both vertical and horizontal Scrollbars are shown when necessary.

#### Vertical Scrollbar

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  BarSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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 {
      options,
    };
  },
});

createApp(ChartExample).mount("#app");
```

[Live example: Vertical Scrollbar](https://www.ag-grid.com/charts/vue3/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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  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 = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <label>Vertical:</label>
        <button v-on:click="setVerticalPosition('left')">Left</button>
        <button v-on:click="setVerticalPosition('right')">Right</button>
        <label class="gap-left">Horizontal:</label>
        <button v-on:click="setHorizontalPosition('top')">Top</button>
        <button v-on:click="setHorizontalPosition('bottom')">Bottom</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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) => {
      const optionsCopy = clone(options.value);

      optionsCopy.scrollbar = {
        ...optionsCopy.scrollbar,
        vertical: {
          ...optionsCopy.scrollbar.vertical,
          position: value,
        },
      };

      options.value = optionsCopy;
    };
    const setHorizontalPosition = (value) => {
      const optionsCopy = clone(options.value);

      optionsCopy.scrollbar = {
        ...optionsCopy.scrollbar,
        horizontal: {
          ...optionsCopy.scrollbar.horizontal,
          position: value,
        },
      };

      options.value = optionsCopy;
    };

    return {
      options,
      setVerticalPosition,
      setHorizontalPosition,
    };
  },
});

createApp(ChartExample).mount("#app");
```

[Live example: Scrollbar Position](https://www.ag-grid.com/charts/vue3/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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  BarSeriesModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

let placement = "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");
  tickSpacingGroup.disabled = !(placement === "inner" && ticksEnabled);
}

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

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <label>Placement:</label>
        <button v-on:click="setPlacement('outer')">Outer</button>
        <button v-on:click="setPlacement('inner')">Inner</button>
      </div>
      <div class="controls-row">
        <label for="spacingSlider">spacing:</label>
        <input type="range" id="spacingSlider" min="0" max="25" value="0" v-on:input="setSpacing($event)" v-on:change="setSpacing($event)">
          <span id="spacingValue" style="display: inline-block; min-width: 3ch; text-align: right">0</span>
          <fieldset id="tickSpacingGroup" class="control-group" disabled="">
            <label for="tickSpacingSlider" class="gap-left">tickSpacing:</label>
            <input type="range" id="tickSpacingSlider" min="0" max="25" value="0" v-on:input="setTickSpacing($event)" v-on:change="setTickSpacing($event)">
              <span id="tickSpacingValue" style="display: inline-block; min-width: 3ch; text-align: right">0</span>
            </fieldset>
            <input type="checkbox" id="ticksEnabled" class="gap-left" v-on:change="setTicksEnabled($event.target.checked)">
              <label for="ticksEnabled">Enable Ticks</label>
            </div>
          </div>
          <ag-charts
            :options="options"
          />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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) => {
      const optionsCopy = clone(options.value);

      placement = value;
      optionsCopy.scrollbar.placement = value;

      updateTickSpacingEnabled();

      options.value = optionsCopy;
    };
    const setSpacing = (event) => {
      const optionsCopy = clone(options.value);

      const value = +event.target.value;
      optionsCopy.scrollbar.spacing = value;

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

      options.value = optionsCopy;
    };
    const setTickSpacing = (event) => {
      const optionsCopy = clone(options.value);

      const value = +event.target.value;
      optionsCopy.scrollbar.tickSpacing = value;

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

      options.value = optionsCopy;
    };
    const setTicksEnabled = (enabled) => {
      const optionsCopy = clone(options.value);

      ticksEnabled = enabled;
      optionsCopy.axes.x.tick.enabled = enabled;

      updateTickSpacingEnabled();

      options.value = optionsCopy;
    };

    return {
      options,
      setPlacement,
      setSpacing,
      setTickSpacing,
      setTicksEnabled,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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

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

const ChartExample = defineComponent({
  template: `
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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 {
      options,
    };
  },
});

createApp(ChartExample).mount("#app");
```

[Live example: Scrollbar Styling](https://www.ag-grid.com/charts/vue3/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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  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 = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <label>Axis Scrolling:</label>
        <button v-on:click="setAxisScrolling(true)">Enable</button>
        <button v-on:click="setAxisScrolling(false)">Disable</button>
        <label>Series Area Scrolling:</label>
        <button v-on:click="setSeriesAreaScrolling(true)">Enable</button>
        <button class="gap-right" v-on:click="setSeriesAreaScrolling(false)">Disable</button>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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) => {
      const optionsCopy = clone(options.value);

      optionsCopy.scrollbar.enableSeriesAreaScrolling = enabled;

      options.value = optionsCopy;
    };
    const setAxisScrolling = (enabled) => {
      const optionsCopy = clone(options.value);

      optionsCopy.scrollbar.enableAxisScrolling = enabled;

      options.value = optionsCopy;
    };

    return {
      options,
      setSeriesAreaScrolling,
      setAxisScrolling,
    };
  },
});

createApp(ChartExample).mount("#app");
```

[Live example: Scrollbar Scrolling](https://www.ag-grid.com/charts/vue3/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/vue/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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  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 = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <label for="visibility">Visibility:</label>
        <select id="visibility" v-on:change="setVisibility($event.target.value)">
          <option value="always" selected="">always</option>
          <option value="auto">auto</option>
          <option value="never">never</option>
        </select>
      </div>
    </div>
    <ag-charts
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<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) => {
      const optionsCopy = clone(options.value);

      optionsCopy.scrollbar.visible = value;

      options.value = optionsCopy;
    };

    return {
      options,
      setVisibility,
    };
  },
});

createApp(ChartExample).mount("#app");
```

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