Vue ChartsScrollbar

Version 14.1.0

Enterprise

The Scrollbar provides an intuitive control for panning when fixed width bars require more space than the series area, or when zoom is applied with the State API or Zoom functionality.

Simple Scrollbar Copy Link

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

main.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");

data.ts

// Source: https://www.gov.uk/government/statistical-data-sets/museums-and-galleries-monthly-visits
export function getData(): any[] {
  return [
    {
      date: new Date(2004, 3, 1),
      "Tate Modern": 304991,
      "Tate Britain": 82215,
    },
    {
      date: new Date(2004, 4, 1),
      "Tate Modern": 319245,
      "Tate Britain": 63315,
    },
    {
      date: new Date(2004, 5, 1),
      "Tate Modern": 393766,
      "Tate Britain": 68627,
    },
    {
      date: new Date(2004, 6, 1),
      "Tate Modern": 468903,
      "Tate Britain": 94343,
    },
    {
      date: new Date(2004, 7, 1),
      "Tate Modern": 512807,
      "Tate Britain": 108577,
    },
    {
      date: new Date(2004, 8, 1),
      "Tate Modern": 320110,
      "Tate Britain": 72756,
    },
    {
      date: new Date(2004, 9, 1),
      "Tate Modern": 361295,
      "Tate Britain": 116482,
    },
    {
      date: new Date(2004, 10, 1),
      "Tate Modern": 308698,
      "Tate Britain": 114781,
    },
    {
      date: new Date(2004, 11, 1),
      "Tate Modern": 274409,
      "Tate Britain": 84652,
    },
    {
      date: new Date(2005, 0, 1),
      "Tate Modern": 274829,
      "Tate Britain": 70043,
    },
    {
      date: new Date(2005, 1, 1),
      "Tate Modern": 284615,
      "Tate Britain": 198868,
    },
    {
      date: new Date(2005, 2, 1),
      "Tate Modern": 323881,
      "Tate Britain": 241796,
    },
    {
      date: new Date(2005, 3, 1),
      "Tate Modern": 301947,
      "Tate Britain": 247591,
    },
    {
      date: new Date(2005, 4, 1),
      "Tate Modern": 279248,
      "Tate Britain": 179741,
    },
    {
      date: new Date(2005, 5, 1),
      "Tate Modern": 359059,
      "Tate Britain": 74463,
    },
    {
      date: new Date(2005, 6, 1),
      "Tate Modern": 347468,
      "Tate Britain": 86742,
    },
    {
      date: new Date(2005, 7, 1),
      "Tate Modern": 328504,
      "Tate Britain": 83305,
    },
    {
      date: new Date(2005, 8, 1),
      "Tate Modern": 351934,
      "Tate Britain": 78505,
    },
    {
      date: new Date(2005, 9, 1),
      "Tate Modern": 442868,
      "Tate Britain": 171689,
    },
    {
      date: new Date(2005, 10, 1),
      "Tate Modern": 321294,
      "Tate Britain": 170853,
    },
    {
      date: new Date(2005, 11, 1),
      "Tate Modern": 286370,
      "Tate Britain": 129524,
    },
    {
      date: new Date(2006, 0, 1),
      "Tate Modern": 314454,
      "Tate Britain": 140825,
    },
    {
      date: new Date(2006, 1, 1),
      "Tate Modern": 303749,
      "Tate Britain": 119974,
    },
    {
      date: new Date(2006, 2, 1),
      "Tate Modern": 321131,
      "Tate Britain": 140147,
    },
    {
      date: new Date(2006, 3, 1),
      "Tate Modern": 390294,
      "Tate Britain": 124153,
    },
    {
      date: new Date(2006, 4, 1),
      "Tate Modern": 374464,
      "Tate Britain": 85218,
    },
    {
      date: new Date(2006, 5, 1),
      "Tate Modern": 335428,
      "Tate Britain": 123950,
    },
    {
      date: new Date(2006, 6, 1),
      "Tate Modern": 437806,
      "Tate Britain": 130378,
    },
    {
      date: new Date(2006, 7, 1),
      "Tate Modern": 480753,
      "Tate Britain": 153279,
    },
    {
      date: new Date(2006, 8, 1),
      "Tate Modern": 459838,
      "Tate Britain": 85238,
    },
    {
      date: new Date(2006, 9, 1),
      "Tate Modern": 622330,
      "Tate Britain": 170075,
    },
    {
      date: new Date(2006, 10, 1),
      "Tate Modern": 455170,
      "Tate Britain": 176751,
    },
    {
      date: new Date(2006, 11, 1),
      "Tate Modern": 419959,
      "Tate Britain": 147371,
    },
    {
      date: new Date(2007, 0, 1),
      "Tate Modern": 369659,
      "Tate Britain": 130737,
    },
    {
      date: new Date(2007, 1, 1),
      "Tate Modern": 424594,
      "Tate Britain": 158744,
    },
    {
      date: new Date(2007, 2, 1),
      "Tate Modern": 464213,
      "Tate Britain": 179811,
    },
    {
      date: new Date(2007, 3, 1),
      "Tate Modern": 466406,
      "Tate Britain": 152384,
    },
    {
      date: new Date(2007, 4, 1),
      "Tate Modern": 377818,
      "Tate Britain": 108264,
    },
    {
      date: new Date(2007, 5, 1),
      "Tate Modern": 387742,
      "Tate Britain": 115782,
    },
    {
      date: new Date(2007, 6, 1),
      "Tate Modern": 469704,
      "Tate Britain": 117993,
    },
    {
      date: new Date(2007, 7, 1),
      "Tate Modern": 485799,
      "Tate Britain": 129129,
    },
    {
      date: new Date(2007, 8, 1),
      "Tate Modern": 347411,
      "Tate Britain": 87065,
    },
    {
      date: new Date(2007, 9, 1),
      "Tate Modern": 539989,
      "Tate Britain": 154457,
    },
    {
      date: new Date(2007, 10, 1),
      "Tate Modern": 464193,
      "Tate Britain": 144865,
    },
    {
      date: new Date(2007, 11, 1),
      "Tate Modern": 394312,
      "Tate Britain": 114046,
    },
    {
      date: new Date(2008, 0, 1),
      "Tate Modern": 393408,
      "Tate Britain": 127872,
    },
    {
      date: new Date(2008, 1, 1),
      "Tate Modern": 436752,
      "Tate Britain": 134969,
    },
    {
      date: new Date(2008, 2, 1),
      "Tate Modern": 473168,
      "Tate Britain": 146421,
    },
    {
      date: new Date(2008, 3, 1),
      "Tate Modern": 365447,
      "Tate Britain": 138119,
    },
    {
      date: new Date(2008, 4, 1),
      "Tate Modern": 405696,
      "Tate Britain": 96816,
    },
    {
      date: new Date(2008, 5, 1),
      "Tate Modern": 385546,
      "Tate Britain": 95746,
    },
    {
      date: new Date(2008, 6, 1),
      "Tate Modern": 386000,
      "Tate Britain": 112746,
    },
    {
      date: new Date(2008, 7, 1),
      "Tate Modern": 472907,
      "Tate Britain": 118294,
    },
    {
      date: new Date(2008, 8, 1),
      "Tate Modern": 367947,
      "Tate Britain": 136605,
    },
    {
      date: new Date(2008, 9, 1),
      "Tate Modern": 487430,
      "Tate Britain": 199997,
    },
    {
      date: new Date(2008, 10, 1),
      "Tate Modern": 372444,
      "Tate Britain": 172007,
    },
    {
      date: new Date(2008, 11, 1),
      "Tate Modern": 315836,
      "Tate Britain": 138717,
    },
    {
      date: new Date(2009, 0, 1),
      "Tate Modern": 344887,
      "Tate Britain": 118376,
    },
    {
      date: new Date(2009, 1, 1),
      "Tate Modern": 361950,
      "Tate Britain": 122786,
    },
    {
      date: new Date(2009, 2, 1),
      "Tate Modern": 381791,
      "Tate Britain": 137446,
    },
    {
      date: new Date(2009, 3, 1),
      "Tate Modern": 397980,
      "Tate Britain": 125360,
    },
    {
      date: new Date(2009, 4, 1),
      "Tate Modern": 421466,
      "Tate Britain": 105269,
    },
    {
      date: new Date(2009, 5, 1),
      "Tate Modern": 357078,
      "Tate Britain": 103951,
    },
    {
      date: new Date(2009, 6, 1),
      "Tate Modern": 458725,
      "Tate Britain": 115899,
    },
    {
      date: new Date(2009, 7, 1),
      "Tate Modern": 470642,
      "Tate Britain": 111567,
    },
    {
      date: new Date(2009, 8, 1),
      "Tate Modern": 371176,
      "Tate Britain": 101568,
    },
    {
      date: new Date(2009, 9, 1),
      "Tate Modern": 500192,
      "Tate Britain": 176530,
    },
    {
      date: new Date(2009, 10, 1),
      "Tate Modern": 358916,
      "Tate Britain": 154266,
    },
    {
      date: new Date(2009, 11, 1),
      "Tate Modern": 323242,
      "Tate Britain": 128819,
    },
    {
      date: new Date(2010, 0, 1),
      "Tate Modern": 349055,
      "Tate Britain": 159282,
    },
    {
      date: new Date(2010, 1, 1),
      "Tate Modern": 380514,
      "Tate Britain": 148516,
    },
    {
      date: new Date(2010, 2, 1),
      "Tate Modern": 399203,
      "Tate Britain": 163368,
    },
    {
      date: new Date(2010, 3, 1),
      "Tate Modern": 391680,
      "Tate Britain": 139862,
    },
    {
      date: new Date(2010, 4, 1),
      "Tate Modern": 443490,
      "Tate Britain": 139404,
    },
    {
      date: new Date(2010, 5, 1),
      "Tate Modern": 366603,
      "Tate Britain": 125357,
    },
    {
      date: new Date(2010, 6, 1),
      "Tate Modern": 478836,
      "Tate Britain": 155331,
    },
    {
      date: new Date(2010, 7, 1),
      "Tate Modern": 506151,
      "Tate Britain": 158909,
    },
    {
      date: new Date(2010, 8, 1),
      "Tate Modern": 370181,
      "Tate Britain": 111759,
    },
    {
      date: new Date(2010, 9, 1),
      "Tate Modern": 623328,
      "Tate Britain": 153689,
    },
    {
      date: new Date(2010, 10, 1),
      "Tate Modern": 435048,
      "Tate Britain": 122231,
    },
    {
      date: new Date(2010, 11, 1),
      "Tate Modern": 317083,
      "Tate Britain": 87583,
    },
  ];
}

{
    scrollbar: {
        enabled: true,
    },
}

Vertical and Horizontal Scrollbars Copy Link

Both vertical and horizontal Scrollbars are shown when necessary.

main.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");

data.ts

// Source: https://www.gov.uk/government/statistical-data-sets/museums-and-galleries-monthly-visits
export function getData(): any[] {
  return [
    {
      date: new Date(2004, 3, 1),
      "Tate Modern": 304991,
      "Tate Britain": 82215,
    },
    {
      date: new Date(2004, 4, 1),
      "Tate Modern": 319245,
      "Tate Britain": 63315,
    },
    {
      date: new Date(2004, 5, 1),
      "Tate Modern": 393766,
      "Tate Britain": 68627,
    },
    {
      date: new Date(2004, 6, 1),
      "Tate Modern": 468903,
      "Tate Britain": 94343,
    },
    {
      date: new Date(2004, 7, 1),
      "Tate Modern": 512807,
      "Tate Britain": 108577,
    },
    {
      date: new Date(2004, 8, 1),
      "Tate Modern": 320110,
      "Tate Britain": 72756,
    },
    {
      date: new Date(2004, 9, 1),
      "Tate Modern": 361295,
      "Tate Britain": 116482,
    },
    {
      date: new Date(2004, 10, 1),
      "Tate Modern": 308698,
      "Tate Britain": 114781,
    },
    {
      date: new Date(2004, 11, 1),
      "Tate Modern": 274409,
      "Tate Britain": 84652,
    },
    {
      date: new Date(2005, 0, 1),
      "Tate Modern": 274829,
      "Tate Britain": 70043,
    },
    {
      date: new Date(2005, 1, 1),
      "Tate Modern": 284615,
      "Tate Britain": 198868,
    },
    {
      date: new Date(2005, 2, 1),
      "Tate Modern": 323881,
      "Tate Britain": 241796,
    },
    {
      date: new Date(2005, 3, 1),
      "Tate Modern": 301947,
      "Tate Britain": 247591,
    },
    {
      date: new Date(2005, 4, 1),
      "Tate Modern": 279248,
      "Tate Britain": 179741,
    },
    {
      date: new Date(2005, 5, 1),
      "Tate Modern": 359059,
      "Tate Britain": 74463,
    },
    {
      date: new Date(2005, 6, 1),
      "Tate Modern": 347468,
      "Tate Britain": 86742,
    },
    {
      date: new Date(2005, 7, 1),
      "Tate Modern": 328504,
      "Tate Britain": 83305,
    },
    {
      date: new Date(2005, 8, 1),
      "Tate Modern": 351934,
      "Tate Britain": 78505,
    },
    {
      date: new Date(2005, 9, 1),
      "Tate Modern": 442868,
      "Tate Britain": 171689,
    },
    {
      date: new Date(2005, 10, 1),
      "Tate Modern": 321294,
      "Tate Britain": 170853,
    },
    {
      date: new Date(2005, 11, 1),
      "Tate Modern": 286370,
      "Tate Britain": 129524,
    },
    {
      date: new Date(2006, 0, 1),
      "Tate Modern": 314454,
      "Tate Britain": 140825,
    },
    {
      date: new Date(2006, 1, 1),
      "Tate Modern": 303749,
      "Tate Britain": 119974,
    },
    {
      date: new Date(2006, 2, 1),
      "Tate Modern": 321131,
      "Tate Britain": 140147,
    },
    {
      date: new Date(2006, 3, 1),
      "Tate Modern": 390294,
      "Tate Britain": 124153,
    },
    {
      date: new Date(2006, 4, 1),
      "Tate Modern": 374464,
      "Tate Britain": 85218,
    },
    {
      date: new Date(2006, 5, 1),
      "Tate Modern": 335428,
      "Tate Britain": 123950,
    },
    {
      date: new Date(2006, 6, 1),
      "Tate Modern": 437806,
      "Tate Britain": 130378,
    },
    {
      date: new Date(2006, 7, 1),
      "Tate Modern": 480753,
      "Tate Britain": 153279,
    },
    {
      date: new Date(2006, 8, 1),
      "Tate Modern": 459838,
      "Tate Britain": 85238,
    },
    {
      date: new Date(2006, 9, 1),
      "Tate Modern": 622330,
      "Tate Britain": 170075,
    },
    {
      date: new Date(2006, 10, 1),
      "Tate Modern": 455170,
      "Tate Britain": 176751,
    },
    {
      date: new Date(2006, 11, 1),
      "Tate Modern": 419959,
      "Tate Britain": 147371,
    },
    {
      date: new Date(2007, 0, 1),
      "Tate Modern": 369659,
      "Tate Britain": 130737,
    },
    {
      date: new Date(2007, 1, 1),
      "Tate Modern": 424594,
      "Tate Britain": 158744,
    },
    {
      date: new Date(2007, 2, 1),
      "Tate Modern": 464213,
      "Tate Britain": 179811,
    },
    {
      date: new Date(2007, 3, 1),
      "Tate Modern": 466406,
      "Tate Britain": 152384,
    },
    {
      date: new Date(2007, 4, 1),
      "Tate Modern": 377818,
      "Tate Britain": 108264,
    },
    {
      date: new Date(2007, 5, 1),
      "Tate Modern": 387742,
      "Tate Britain": 115782,
    },
    {
      date: new Date(2007, 6, 1),
      "Tate Modern": 469704,
      "Tate Britain": 117993,
    },
    {
      date: new Date(2007, 7, 1),
      "Tate Modern": 485799,
      "Tate Britain": 129129,
    },
    {
      date: new Date(2007, 8, 1),
      "Tate Modern": 347411,
      "Tate Britain": 87065,
    },
    {
      date: new Date(2007, 9, 1),
      "Tate Modern": 539989,
      "Tate Britain": 154457,
    },
    {
      date: new Date(2007, 10, 1),
      "Tate Modern": 464193,
      "Tate Britain": 144865,
    },
    {
      date: new Date(2007, 11, 1),
      "Tate Modern": 394312,
      "Tate Britain": 114046,
    },
    {
      date: new Date(2008, 0, 1),
      "Tate Modern": 393408,
      "Tate Britain": 127872,
    },
    {
      date: new Date(2008, 1, 1),
      "Tate Modern": 436752,
      "Tate Britain": 134969,
    },
    {
      date: new Date(2008, 2, 1),
      "Tate Modern": 473168,
      "Tate Britain": 146421,
    },
    {
      date: new Date(2008, 3, 1),
      "Tate Modern": 365447,
      "Tate Britain": 138119,
    },
    {
      date: new Date(2008, 4, 1),
      "Tate Modern": 405696,
      "Tate Britain": 96816,
    },
    {
      date: new Date(2008, 5, 1),
      "Tate Modern": 385546,
      "Tate Britain": 95746,
    },
    {
      date: new Date(2008, 6, 1),
      "Tate Modern": 386000,
      "Tate Britain": 112746,
    },
    {
      date: new Date(2008, 7, 1),
      "Tate Modern": 472907,
      "Tate Britain": 118294,
    },
    {
      date: new Date(2008, 8, 1),
      "Tate Modern": 367947,
      "Tate Britain": 136605,
    },
    {
      date: new Date(2008, 9, 1),
      "Tate Modern": 487430,
      "Tate Britain": 199997,
    },
    {
      date: new Date(2008, 10, 1),
      "Tate Modern": 372444,
      "Tate Britain": 172007,
    },
    {
      date: new Date(2008, 11, 1),
      "Tate Modern": 315836,
      "Tate Britain": 138717,
    },
    {
      date: new Date(2009, 0, 1),
      "Tate Modern": 344887,
      "Tate Britain": 118376,
    },
    {
      date: new Date(2009, 1, 1),
      "Tate Modern": 361950,
      "Tate Britain": 122786,
    },
    {
      date: new Date(2009, 2, 1),
      "Tate Modern": 381791,
      "Tate Britain": 137446,
    },
    {
      date: new Date(2009, 3, 1),
      "Tate Modern": 397980,
      "Tate Britain": 125360,
    },
    {
      date: new Date(2009, 4, 1),
      "Tate Modern": 421466,
      "Tate Britain": 105269,
    },
    {
      date: new Date(2009, 5, 1),
      "Tate Modern": 357078,
      "Tate Britain": 103951,
    },
    {
      date: new Date(2009, 6, 1),
      "Tate Modern": 458725,
      "Tate Britain": 115899,
    },
    {
      date: new Date(2009, 7, 1),
      "Tate Modern": 470642,
      "Tate Britain": 111567,
    },
    {
      date: new Date(2009, 8, 1),
      "Tate Modern": 371176,
      "Tate Britain": 101568,
    },
    {
      date: new Date(2009, 9, 1),
      "Tate Modern": 500192,
      "Tate Britain": 176530,
    },
    {
      date: new Date(2009, 10, 1),
      "Tate Modern": 358916,
      "Tate Britain": 154266,
    },
    {
      date: new Date(2009, 11, 1),
      "Tate Modern": 323242,
      "Tate Britain": 128819,
    },
    {
      date: new Date(2010, 0, 1),
      "Tate Modern": 349055,
      "Tate Britain": 159282,
    },
    {
      date: new Date(2010, 1, 1),
      "Tate Modern": 380514,
      "Tate Britain": 148516,
    },
    {
      date: new Date(2010, 2, 1),
      "Tate Modern": 399203,
      "Tate Britain": 163368,
    },
    {
      date: new Date(2010, 3, 1),
      "Tate Modern": 391680,
      "Tate Britain": 139862,
    },
    {
      date: new Date(2010, 4, 1),
      "Tate Modern": 443490,
      "Tate Britain": 139404,
    },
    {
      date: new Date(2010, 5, 1),
      "Tate Modern": 366603,
      "Tate Britain": 125357,
    },
    {
      date: new Date(2010, 6, 1),
      "Tate Modern": 478836,
      "Tate Britain": 155331,
    },
    {
      date: new Date(2010, 7, 1),
      "Tate Modern": 506151,
      "Tate Britain": 158909,
    },
    {
      date: new Date(2010, 8, 1),
      "Tate Modern": 370181,
      "Tate Britain": 111759,
    },
    {
      date: new Date(2010, 9, 1),
      "Tate Modern": 623328,
      "Tate Britain": 153689,
    },
    {
      date: new Date(2010, 10, 1),
      "Tate Modern": 435048,
      "Tate Britain": 122231,
    },
    {
      date: new Date(2010, 11, 1),
      "Tate Modern": 317083,
      "Tate Britain": 87583,
    },
  ];
}

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 Copy Link

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

main.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");

data.ts

// Source: https://www.gov.uk/government/statistical-data-sets/museums-and-galleries-monthly-visits
export function getData(): any[] {
  return [
    {
      date: new Date(2004, 3, 1),
      "Tate Modern": 304991,
      "Tate Britain": 82215,
    },
    {
      date: new Date(2004, 4, 1),
      "Tate Modern": 319245,
      "Tate Britain": 63315,
    },
    {
      date: new Date(2004, 5, 1),
      "Tate Modern": 393766,
      "Tate Britain": 68627,
    },
    {
      date: new Date(2004, 6, 1),
      "Tate Modern": 468903,
      "Tate Britain": 94343,
    },
    {
      date: new Date(2004, 7, 1),
      "Tate Modern": 512807,
      "Tate Britain": 108577,
    },
    {
      date: new Date(2004, 8, 1),
      "Tate Modern": 320110,
      "Tate Britain": 72756,
    },
    {
      date: new Date(2004, 9, 1),
      "Tate Modern": 361295,
      "Tate Britain": 116482,
    },
    {
      date: new Date(2004, 10, 1),
      "Tate Modern": 308698,
      "Tate Britain": 114781,
    },
    {
      date: new Date(2004, 11, 1),
      "Tate Modern": 274409,
      "Tate Britain": 84652,
    },
    {
      date: new Date(2005, 0, 1),
      "Tate Modern": 274829,
      "Tate Britain": 70043,
    },
    {
      date: new Date(2005, 1, 1),
      "Tate Modern": 284615,
      "Tate Britain": 198868,
    },
    {
      date: new Date(2005, 2, 1),
      "Tate Modern": 323881,
      "Tate Britain": 241796,
    },
    {
      date: new Date(2005, 3, 1),
      "Tate Modern": 301947,
      "Tate Britain": 247591,
    },
    {
      date: new Date(2005, 4, 1),
      "Tate Modern": 279248,
      "Tate Britain": 179741,
    },
    {
      date: new Date(2005, 5, 1),
      "Tate Modern": 359059,
      "Tate Britain": 74463,
    },
    {
      date: new Date(2005, 6, 1),
      "Tate Modern": 347468,
      "Tate Britain": 86742,
    },
    {
      date: new Date(2005, 7, 1),
      "Tate Modern": 328504,
      "Tate Britain": 83305,
    },
    {
      date: new Date(2005, 8, 1),
      "Tate Modern": 351934,
      "Tate Britain": 78505,
    },
    {
      date: new Date(2005, 9, 1),
      "Tate Modern": 442868,
      "Tate Britain": 171689,
    },
    {
      date: new Date(2005, 10, 1),
      "Tate Modern": 321294,
      "Tate Britain": 170853,
    },
    {
      date: new Date(2005, 11, 1),
      "Tate Modern": 286370,
      "Tate Britain": 129524,
    },
    {
      date: new Date(2006, 0, 1),
      "Tate Modern": 314454,
      "Tate Britain": 140825,
    },
    {
      date: new Date(2006, 1, 1),
      "Tate Modern": 303749,
      "Tate Britain": 119974,
    },
    {
      date: new Date(2006, 2, 1),
      "Tate Modern": 321131,
      "Tate Britain": 140147,
    },
    {
      date: new Date(2006, 3, 1),
      "Tate Modern": 390294,
      "Tate Britain": 124153,
    },
    {
      date: new Date(2006, 4, 1),
      "Tate Modern": 374464,
      "Tate Britain": 85218,
    },
    {
      date: new Date(2006, 5, 1),
      "Tate Modern": 335428,
      "Tate Britain": 123950,
    },
    {
      date: new Date(2006, 6, 1),
      "Tate Modern": 437806,
      "Tate Britain": 130378,
    },
    {
      date: new Date(2006, 7, 1),
      "Tate Modern": 480753,
      "Tate Britain": 153279,
    },
    {
      date: new Date(2006, 8, 1),
      "Tate Modern": 459838,
      "Tate Britain": 85238,
    },
    {
      date: new Date(2006, 9, 1),
      "Tate Modern": 622330,
      "Tate Britain": 170075,
    },
    {
      date: new Date(2006, 10, 1),
      "Tate Modern": 455170,
      "Tate Britain": 176751,
    },
    {
      date: new Date(2006, 11, 1),
      "Tate Modern": 419959,
      "Tate Britain": 147371,
    },
    {
      date: new Date(2007, 0, 1),
      "Tate Modern": 369659,
      "Tate Britain": 130737,
    },
    {
      date: new Date(2007, 1, 1),
      "Tate Modern": 424594,
      "Tate Britain": 158744,
    },
    {
      date: new Date(2007, 2, 1),
      "Tate Modern": 464213,
      "Tate Britain": 179811,
    },
    {
      date: new Date(2007, 3, 1),
      "Tate Modern": 466406,
      "Tate Britain": 152384,
    },
    {
      date: new Date(2007, 4, 1),
      "Tate Modern": 377818,
      "Tate Britain": 108264,
    },
    {
      date: new Date(2007, 5, 1),
      "Tate Modern": 387742,
      "Tate Britain": 115782,
    },
    {
      date: new Date(2007, 6, 1),
      "Tate Modern": 469704,
      "Tate Britain": 117993,
    },
    {
      date: new Date(2007, 7, 1),
      "Tate Modern": 485799,
      "Tate Britain": 129129,
    },
    {
      date: new Date(2007, 8, 1),
      "Tate Modern": 347411,
      "Tate Britain": 87065,
    },
    {
      date: new Date(2007, 9, 1),
      "Tate Modern": 539989,
      "Tate Britain": 154457,
    },
    {
      date: new Date(2007, 10, 1),
      "Tate Modern": 464193,
      "Tate Britain": 144865,
    },
    {
      date: new Date(2007, 11, 1),
      "Tate Modern": 394312,
      "Tate Britain": 114046,
    },
    {
      date: new Date(2008, 0, 1),
      "Tate Modern": 393408,
      "Tate Britain": 127872,
    },
    {
      date: new Date(2008, 1, 1),
      "Tate Modern": 436752,
      "Tate Britain": 134969,
    },
    {
      date: new Date(2008, 2, 1),
      "Tate Modern": 473168,
      "Tate Britain": 146421,
    },
    {
      date: new Date(2008, 3, 1),
      "Tate Modern": 365447,
      "Tate Britain": 138119,
    },
    {
      date: new Date(2008, 4, 1),
      "Tate Modern": 405696,
      "Tate Britain": 96816,
    },
    {
      date: new Date(2008, 5, 1),
      "Tate Modern": 385546,
      "Tate Britain": 95746,
    },
    {
      date: new Date(2008, 6, 1),
      "Tate Modern": 386000,
      "Tate Britain": 112746,
    },
    {
      date: new Date(2008, 7, 1),
      "Tate Modern": 472907,
      "Tate Britain": 118294,
    },
    {
      date: new Date(2008, 8, 1),
      "Tate Modern": 367947,
      "Tate Britain": 136605,
    },
    {
      date: new Date(2008, 9, 1),
      "Tate Modern": 487430,
      "Tate Britain": 199997,
    },
    {
      date: new Date(2008, 10, 1),
      "Tate Modern": 372444,
      "Tate Britain": 172007,
    },
    {
      date: new Date(2008, 11, 1),
      "Tate Modern": 315836,
      "Tate Britain": 138717,
    },
    {
      date: new Date(2009, 0, 1),
      "Tate Modern": 344887,
      "Tate Britain": 118376,
    },
    {
      date: new Date(2009, 1, 1),
      "Tate Modern": 361950,
      "Tate Britain": 122786,
    },
    {
      date: new Date(2009, 2, 1),
      "Tate Modern": 381791,
      "Tate Britain": 137446,
    },
    {
      date: new Date(2009, 3, 1),
      "Tate Modern": 397980,
      "Tate Britain": 125360,
    },
    {
      date: new Date(2009, 4, 1),
      "Tate Modern": 421466,
      "Tate Britain": 105269,
    },
    {
      date: new Date(2009, 5, 1),
      "Tate Modern": 357078,
      "Tate Britain": 103951,
    },
    {
      date: new Date(2009, 6, 1),
      "Tate Modern": 458725,
      "Tate Britain": 115899,
    },
    {
      date: new Date(2009, 7, 1),
      "Tate Modern": 470642,
      "Tate Britain": 111567,
    },
    {
      date: new Date(2009, 8, 1),
      "Tate Modern": 371176,
      "Tate Britain": 101568,
    },
    {
      date: new Date(2009, 9, 1),
      "Tate Modern": 500192,
      "Tate Britain": 176530,
    },
    {
      date: new Date(2009, 10, 1),
      "Tate Modern": 358916,
      "Tate Britain": 154266,
    },
    {
      date: new Date(2009, 11, 1),
      "Tate Modern": 323242,
      "Tate Britain": 128819,
    },
    {
      date: new Date(2010, 0, 1),
      "Tate Modern": 349055,
      "Tate Britain": 159282,
    },
    {
      date: new Date(2010, 1, 1),
      "Tate Modern": 380514,
      "Tate Britain": 148516,
    },
    {
      date: new Date(2010, 2, 1),
      "Tate Modern": 399203,
      "Tate Britain": 163368,
    },
    {
      date: new Date(2010, 3, 1),
      "Tate Modern": 391680,
      "Tate Britain": 139862,
    },
    {
      date: new Date(2010, 4, 1),
      "Tate Modern": 443490,
      "Tate Britain": 139404,
    },
    {
      date: new Date(2010, 5, 1),
      "Tate Modern": 366603,
      "Tate Britain": 125357,
    },
    {
      date: new Date(2010, 6, 1),
      "Tate Modern": 478836,
      "Tate Britain": 155331,
    },
    {
      date: new Date(2010, 7, 1),
      "Tate Modern": 506151,
      "Tate Britain": 158909,
    },
    {
      date: new Date(2010, 8, 1),
      "Tate Modern": 370181,
      "Tate Britain": 111759,
    },
    {
      date: new Date(2010, 9, 1),
      "Tate Modern": 623328,
      "Tate Britain": 153689,
    },
    {
      date: new Date(2010, 10, 1),
      "Tate Modern": 435048,
      "Tate Britain": 122231,
    },
    {
      date: new Date(2010, 11, 1),
      "Tate Modern": 317083,
      "Tate Britain": 87583,
    },
  ];
}

{
    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 Copy Link

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

main.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");

data.ts

// Source: https://www.gov.uk/government/statistical-data-sets/museums-and-galleries-monthly-visits
export function getData(): any[] {
  return [
    {
      date: new Date(2004, 3, 1),
      "Tate Modern": 304991,
      "Tate Britain": 82215,
    },
    {
      date: new Date(2004, 4, 1),
      "Tate Modern": 319245,
      "Tate Britain": 63315,
    },
    {
      date: new Date(2004, 5, 1),
      "Tate Modern": 393766,
      "Tate Britain": 68627,
    },
    {
      date: new Date(2004, 6, 1),
      "Tate Modern": 468903,
      "Tate Britain": 94343,
    },
    {
      date: new Date(2004, 7, 1),
      "Tate Modern": 512807,
      "Tate Britain": 108577,
    },
    {
      date: new Date(2004, 8, 1),
      "Tate Modern": 320110,
      "Tate Britain": 72756,
    },
    {
      date: new Date(2004, 9, 1),
      "Tate Modern": 361295,
      "Tate Britain": 116482,
    },
    {
      date: new Date(2004, 10, 1),
      "Tate Modern": 308698,
      "Tate Britain": 114781,
    },
    {
      date: new Date(2004, 11, 1),
      "Tate Modern": 274409,
      "Tate Britain": 84652,
    },
    {
      date: new Date(2005, 0, 1),
      "Tate Modern": 274829,
      "Tate Britain": 70043,
    },
    {
      date: new Date(2005, 1, 1),
      "Tate Modern": 284615,
      "Tate Britain": 198868,
    },
    {
      date: new Date(2005, 2, 1),
      "Tate Modern": 323881,
      "Tate Britain": 241796,
    },
    {
      date: new Date(2005, 3, 1),
      "Tate Modern": 301947,
      "Tate Britain": 247591,
    },
    {
      date: new Date(2005, 4, 1),
      "Tate Modern": 279248,
      "Tate Britain": 179741,
    },
    {
      date: new Date(2005, 5, 1),
      "Tate Modern": 359059,
      "Tate Britain": 74463,
    },
    {
      date: new Date(2005, 6, 1),
      "Tate Modern": 347468,
      "Tate Britain": 86742,
    },
    {
      date: new Date(2005, 7, 1),
      "Tate Modern": 328504,
      "Tate Britain": 83305,
    },
    {
      date: new Date(2005, 8, 1),
      "Tate Modern": 351934,
      "Tate Britain": 78505,
    },
    {
      date: new Date(2005, 9, 1),
      "Tate Modern": 442868,
      "Tate Britain": 171689,
    },
    {
      date: new Date(2005, 10, 1),
      "Tate Modern": 321294,
      "Tate Britain": 170853,
    },
    {
      date: new Date(2005, 11, 1),
      "Tate Modern": 286370,
      "Tate Britain": 129524,
    },
    {
      date: new Date(2006, 0, 1),
      "Tate Modern": 314454,
      "Tate Britain": 140825,
    },
    {
      date: new Date(2006, 1, 1),
      "Tate Modern": 303749,
      "Tate Britain": 119974,
    },
    {
      date: new Date(2006, 2, 1),
      "Tate Modern": 321131,
      "Tate Britain": 140147,
    },
    {
      date: new Date(2006, 3, 1),
      "Tate Modern": 390294,
      "Tate Britain": 124153,
    },
    {
      date: new Date(2006, 4, 1),
      "Tate Modern": 374464,
      "Tate Britain": 85218,
    },
    {
      date: new Date(2006, 5, 1),
      "Tate Modern": 335428,
      "Tate Britain": 123950,
    },
    {
      date: new Date(2006, 6, 1),
      "Tate Modern": 437806,
      "Tate Britain": 130378,
    },
    {
      date: new Date(2006, 7, 1),
      "Tate Modern": 480753,
      "Tate Britain": 153279,
    },
    {
      date: new Date(2006, 8, 1),
      "Tate Modern": 459838,
      "Tate Britain": 85238,
    },
    {
      date: new Date(2006, 9, 1),
      "Tate Modern": 622330,
      "Tate Britain": 170075,
    },
    {
      date: new Date(2006, 10, 1),
      "Tate Modern": 455170,
      "Tate Britain": 176751,
    },
    {
      date: new Date(2006, 11, 1),
      "Tate Modern": 419959,
      "Tate Britain": 147371,
    },
    {
      date: new Date(2007, 0, 1),
      "Tate Modern": 369659,
      "Tate Britain": 130737,
    },
    {
      date: new Date(2007, 1, 1),
      "Tate Modern": 424594,
      "Tate Britain": 158744,
    },
    {
      date: new Date(2007, 2, 1),
      "Tate Modern": 464213,
      "Tate Britain": 179811,
    },
    {
      date: new Date(2007, 3, 1),
      "Tate Modern": 466406,
      "Tate Britain": 152384,
    },
    {
      date: new Date(2007, 4, 1),
      "Tate Modern": 377818,
      "Tate Britain": 108264,
    },
    {
      date: new Date(2007, 5, 1),
      "Tate Modern": 387742,
      "Tate Britain": 115782,
    },
    {
      date: new Date(2007, 6, 1),
      "Tate Modern": 469704,
      "Tate Britain": 117993,
    },
    {
      date: new Date(2007, 7, 1),
      "Tate Modern": 485799,
      "Tate Britain": 129129,
    },
    {
      date: new Date(2007, 8, 1),
      "Tate Modern": 347411,
      "Tate Britain": 87065,
    },
    {
      date: new Date(2007, 9, 1),
      "Tate Modern": 539989,
      "Tate Britain": 154457,
    },
    {
      date: new Date(2007, 10, 1),
      "Tate Modern": 464193,
      "Tate Britain": 144865,
    },
    {
      date: new Date(2007, 11, 1),
      "Tate Modern": 394312,
      "Tate Britain": 114046,
    },
    {
      date: new Date(2008, 0, 1),
      "Tate Modern": 393408,
      "Tate Britain": 127872,
    },
    {
      date: new Date(2008, 1, 1),
      "Tate Modern": 436752,
      "Tate Britain": 134969,
    },
    {
      date: new Date(2008, 2, 1),
      "Tate Modern": 473168,
      "Tate Britain": 146421,
    },
    {
      date: new Date(2008, 3, 1),
      "Tate Modern": 365447,
      "Tate Britain": 138119,
    },
    {
      date: new Date(2008, 4, 1),
      "Tate Modern": 405696,
      "Tate Britain": 96816,
    },
    {
      date: new Date(2008, 5, 1),
      "Tate Modern": 385546,
      "Tate Britain": 95746,
    },
    {
      date: new Date(2008, 6, 1),
      "Tate Modern": 386000,
      "Tate Britain": 112746,
    },
    {
      date: new Date(2008, 7, 1),
      "Tate Modern": 472907,
      "Tate Britain": 118294,
    },
    {
      date: new Date(2008, 8, 1),
      "Tate Modern": 367947,
      "Tate Britain": 136605,
    },
    {
      date: new Date(2008, 9, 1),
      "Tate Modern": 487430,
      "Tate Britain": 199997,
    },
    {
      date: new Date(2008, 10, 1),
      "Tate Modern": 372444,
      "Tate Britain": 172007,
    },
    {
      date: new Date(2008, 11, 1),
      "Tate Modern": 315836,
      "Tate Britain": 138717,
    },
    {
      date: new Date(2009, 0, 1),
      "Tate Modern": 344887,
      "Tate Britain": 118376,
    },
    {
      date: new Date(2009, 1, 1),
      "Tate Modern": 361950,
      "Tate Britain": 122786,
    },
    {
      date: new Date(2009, 2, 1),
      "Tate Modern": 381791,
      "Tate Britain": 137446,
    },
    {
      date: new Date(2009, 3, 1),
      "Tate Modern": 397980,
      "Tate Britain": 125360,
    },
    {
      date: new Date(2009, 4, 1),
      "Tate Modern": 421466,
      "Tate Britain": 105269,
    },
    {
      date: new Date(2009, 5, 1),
      "Tate Modern": 357078,
      "Tate Britain": 103951,
    },
    {
      date: new Date(2009, 6, 1),
      "Tate Modern": 458725,
      "Tate Britain": 115899,
    },
    {
      date: new Date(2009, 7, 1),
      "Tate Modern": 470642,
      "Tate Britain": 111567,
    },
    {
      date: new Date(2009, 8, 1),
      "Tate Modern": 371176,
      "Tate Britain": 101568,
    },
    {
      date: new Date(2009, 9, 1),
      "Tate Modern": 500192,
      "Tate Britain": 176530,
    },
    {
      date: new Date(2009, 10, 1),
      "Tate Modern": 358916,
      "Tate Britain": 154266,
    },
    {
      date: new Date(2009, 11, 1),
      "Tate Modern": 323242,
      "Tate Britain": 128819,
    },
    {
      date: new Date(2010, 0, 1),
      "Tate Modern": 349055,
      "Tate Britain": 159282,
    },
    {
      date: new Date(2010, 1, 1),
      "Tate Modern": 380514,
      "Tate Britain": 148516,
    },
    {
      date: new Date(2010, 2, 1),
      "Tate Modern": 399203,
      "Tate Britain": 163368,
    },
    {
      date: new Date(2010, 3, 1),
      "Tate Modern": 391680,
      "Tate Britain": 139862,
    },
    {
      date: new Date(2010, 4, 1),
      "Tate Modern": 443490,
      "Tate Britain": 139404,
    },
    {
      date: new Date(2010, 5, 1),
      "Tate Modern": 366603,
      "Tate Britain": 125357,
    },
    {
      date: new Date(2010, 6, 1),
      "Tate Modern": 478836,
      "Tate Britain": 155331,
    },
    {
      date: new Date(2010, 7, 1),
      "Tate Modern": 506151,
      "Tate Britain": 158909,
    },
    {
      date: new Date(2010, 8, 1),
      "Tate Modern": 370181,
      "Tate Britain": 111759,
    },
    {
      date: new Date(2010, 9, 1),
      "Tate Modern": 623328,
      "Tate Britain": 153689,
    },
    {
      date: new Date(2010, 10, 1),
      "Tate Modern": 435048,
      "Tate Britain": 122231,
    },
    {
      date: new Date(2010, 11, 1),
      "Tate Modern": 317083,
      "Tate Britain": 87583,
    },
  ];
}

{
    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 Copy Link

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

main.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");

data.ts

// Source: https://www.gov.uk/government/statistical-data-sets/museums-and-galleries-monthly-visits
export function getData(): any[] {
  return [
    {
      date: new Date(2004, 3, 1),
      "Tate Modern": 304991,
      "Tate Britain": 82215,
    },
    {
      date: new Date(2004, 4, 1),
      "Tate Modern": 319245,
      "Tate Britain": 63315,
    },
    {
      date: new Date(2004, 5, 1),
      "Tate Modern": 393766,
      "Tate Britain": 68627,
    },
    {
      date: new Date(2004, 6, 1),
      "Tate Modern": 468903,
      "Tate Britain": 94343,
    },
    {
      date: new Date(2004, 7, 1),
      "Tate Modern": 512807,
      "Tate Britain": 108577,
    },
    {
      date: new Date(2004, 8, 1),
      "Tate Modern": 320110,
      "Tate Britain": 72756,
    },
    {
      date: new Date(2004, 9, 1),
      "Tate Modern": 361295,
      "Tate Britain": 116482,
    },
    {
      date: new Date(2004, 10, 1),
      "Tate Modern": 308698,
      "Tate Britain": 114781,
    },
    {
      date: new Date(2004, 11, 1),
      "Tate Modern": 274409,
      "Tate Britain": 84652,
    },
    {
      date: new Date(2005, 0, 1),
      "Tate Modern": 274829,
      "Tate Britain": 70043,
    },
    {
      date: new Date(2005, 1, 1),
      "Tate Modern": 284615,
      "Tate Britain": 198868,
    },
    {
      date: new Date(2005, 2, 1),
      "Tate Modern": 323881,
      "Tate Britain": 241796,
    },
    {
      date: new Date(2005, 3, 1),
      "Tate Modern": 301947,
      "Tate Britain": 247591,
    },
    {
      date: new Date(2005, 4, 1),
      "Tate Modern": 279248,
      "Tate Britain": 179741,
    },
    {
      date: new Date(2005, 5, 1),
      "Tate Modern": 359059,
      "Tate Britain": 74463,
    },
    {
      date: new Date(2005, 6, 1),
      "Tate Modern": 347468,
      "Tate Britain": 86742,
    },
    {
      date: new Date(2005, 7, 1),
      "Tate Modern": 328504,
      "Tate Britain": 83305,
    },
    {
      date: new Date(2005, 8, 1),
      "Tate Modern": 351934,
      "Tate Britain": 78505,
    },
    {
      date: new Date(2005, 9, 1),
      "Tate Modern": 442868,
      "Tate Britain": 171689,
    },
    {
      date: new Date(2005, 10, 1),
      "Tate Modern": 321294,
      "Tate Britain": 170853,
    },
    {
      date: new Date(2005, 11, 1),
      "Tate Modern": 286370,
      "Tate Britain": 129524,
    },
    {
      date: new Date(2006, 0, 1),
      "Tate Modern": 314454,
      "Tate Britain": 140825,
    },
    {
      date: new Date(2006, 1, 1),
      "Tate Modern": 303749,
      "Tate Britain": 119974,
    },
    {
      date: new Date(2006, 2, 1),
      "Tate Modern": 321131,
      "Tate Britain": 140147,
    },
    {
      date: new Date(2006, 3, 1),
      "Tate Modern": 390294,
      "Tate Britain": 124153,
    },
    {
      date: new Date(2006, 4, 1),
      "Tate Modern": 374464,
      "Tate Britain": 85218,
    },
    {
      date: new Date(2006, 5, 1),
      "Tate Modern": 335428,
      "Tate Britain": 123950,
    },
    {
      date: new Date(2006, 6, 1),
      "Tate Modern": 437806,
      "Tate Britain": 130378,
    },
    {
      date: new Date(2006, 7, 1),
      "Tate Modern": 480753,
      "Tate Britain": 153279,
    },
    {
      date: new Date(2006, 8, 1),
      "Tate Modern": 459838,
      "Tate Britain": 85238,
    },
    {
      date: new Date(2006, 9, 1),
      "Tate Modern": 622330,
      "Tate Britain": 170075,
    },
    {
      date: new Date(2006, 10, 1),
      "Tate Modern": 455170,
      "Tate Britain": 176751,
    },
    {
      date: new Date(2006, 11, 1),
      "Tate Modern": 419959,
      "Tate Britain": 147371,
    },
    {
      date: new Date(2007, 0, 1),
      "Tate Modern": 369659,
      "Tate Britain": 130737,
    },
    {
      date: new Date(2007, 1, 1),
      "Tate Modern": 424594,
      "Tate Britain": 158744,
    },
    {
      date: new Date(2007, 2, 1),
      "Tate Modern": 464213,
      "Tate Britain": 179811,
    },
    {
      date: new Date(2007, 3, 1),
      "Tate Modern": 466406,
      "Tate Britain": 152384,
    },
    {
      date: new Date(2007, 4, 1),
      "Tate Modern": 377818,
      "Tate Britain": 108264,
    },
    {
      date: new Date(2007, 5, 1),
      "Tate Modern": 387742,
      "Tate Britain": 115782,
    },
    {
      date: new Date(2007, 6, 1),
      "Tate Modern": 469704,
      "Tate Britain": 117993,
    },
    {
      date: new Date(2007, 7, 1),
      "Tate Modern": 485799,
      "Tate Britain": 129129,
    },
    {
      date: new Date(2007, 8, 1),
      "Tate Modern": 347411,
      "Tate Britain": 87065,
    },
    {
      date: new Date(2007, 9, 1),
      "Tate Modern": 539989,
      "Tate Britain": 154457,
    },
    {
      date: new Date(2007, 10, 1),
      "Tate Modern": 464193,
      "Tate Britain": 144865,
    },
    {
      date: new Date(2007, 11, 1),
      "Tate Modern": 394312,
      "Tate Britain": 114046,
    },
    {
      date: new Date(2008, 0, 1),
      "Tate Modern": 393408,
      "Tate Britain": 127872,
    },
    {
      date: new Date(2008, 1, 1),
      "Tate Modern": 436752,
      "Tate Britain": 134969,
    },
    {
      date: new Date(2008, 2, 1),
      "Tate Modern": 473168,
      "Tate Britain": 146421,
    },
    {
      date: new Date(2008, 3, 1),
      "Tate Modern": 365447,
      "Tate Britain": 138119,
    },
    {
      date: new Date(2008, 4, 1),
      "Tate Modern": 405696,
      "Tate Britain": 96816,
    },
    {
      date: new Date(2008, 5, 1),
      "Tate Modern": 385546,
      "Tate Britain": 95746,
    },
    {
      date: new Date(2008, 6, 1),
      "Tate Modern": 386000,
      "Tate Britain": 112746,
    },
    {
      date: new Date(2008, 7, 1),
      "Tate Modern": 472907,
      "Tate Britain": 118294,
    },
    {
      date: new Date(2008, 8, 1),
      "Tate Modern": 367947,
      "Tate Britain": 136605,
    },
    {
      date: new Date(2008, 9, 1),
      "Tate Modern": 487430,
      "Tate Britain": 199997,
    },
    {
      date: new Date(2008, 10, 1),
      "Tate Modern": 372444,
      "Tate Britain": 172007,
    },
    {
      date: new Date(2008, 11, 1),
      "Tate Modern": 315836,
      "Tate Britain": 138717,
    },
    {
      date: new Date(2009, 0, 1),
      "Tate Modern": 344887,
      "Tate Britain": 118376,
    },
    {
      date: new Date(2009, 1, 1),
      "Tate Modern": 361950,
      "Tate Britain": 122786,
    },
    {
      date: new Date(2009, 2, 1),
      "Tate Modern": 381791,
      "Tate Britain": 137446,
    },
    {
      date: new Date(2009, 3, 1),
      "Tate Modern": 397980,
      "Tate Britain": 125360,
    },
    {
      date: new Date(2009, 4, 1),
      "Tate Modern": 421466,
      "Tate Britain": 105269,
    },
    {
      date: new Date(2009, 5, 1),
      "Tate Modern": 357078,
      "Tate Britain": 103951,
    },
    {
      date: new Date(2009, 6, 1),
      "Tate Modern": 458725,
      "Tate Britain": 115899,
    },
    {
      date: new Date(2009, 7, 1),
      "Tate Modern": 470642,
      "Tate Britain": 111567,
    },
    {
      date: new Date(2009, 8, 1),
      "Tate Modern": 371176,
      "Tate Britain": 101568,
    },
    {
      date: new Date(2009, 9, 1),
      "Tate Modern": 500192,
      "Tate Britain": 176530,
    },
    {
      date: new Date(2009, 10, 1),
      "Tate Modern": 358916,
      "Tate Britain": 154266,
    },
    {
      date: new Date(2009, 11, 1),
      "Tate Modern": 323242,
      "Tate Britain": 128819,
    },
    {
      date: new Date(2010, 0, 1),
      "Tate Modern": 349055,
      "Tate Britain": 159282,
    },
    {
      date: new Date(2010, 1, 1),
      "Tate Modern": 380514,
      "Tate Britain": 148516,
    },
    {
      date: new Date(2010, 2, 1),
      "Tate Modern": 399203,
      "Tate Britain": 163368,
    },
    {
      date: new Date(2010, 3, 1),
      "Tate Modern": 391680,
      "Tate Britain": 139862,
    },
    {
      date: new Date(2010, 4, 1),
      "Tate Modern": 443490,
      "Tate Britain": 139404,
    },
    {
      date: new Date(2010, 5, 1),
      "Tate Modern": 366603,
      "Tate Britain": 125357,
    },
    {
      date: new Date(2010, 6, 1),
      "Tate Modern": 478836,
      "Tate Britain": 155331,
    },
    {
      date: new Date(2010, 7, 1),
      "Tate Modern": 506151,
      "Tate Britain": 158909,
    },
    {
      date: new Date(2010, 8, 1),
      "Tate Modern": 370181,
      "Tate Britain": 111759,
    },
    {
      date: new Date(2010, 9, 1),
      "Tate Modern": 623328,
      "Tate Britain": 153689,
    },
    {
      date: new Date(2010, 10, 1),
      "Tate Modern": 435048,
      "Tate Britain": 122231,
    },
    {
      date: new Date(2010, 11, 1),
      "Tate Modern": 317083,
      "Tate Britain": 87583,
    },
  ];
}

{
    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 for more details.

Interactivity Copy Link

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 Copy Link

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.

main.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");

data.ts

// Source: https://www.gov.uk/government/statistical-data-sets/museums-and-galleries-monthly-visits
export function getData(): any[] {
  return [
    {
      date: new Date(2004, 3, 1),
      "Tate Modern": 304991,
      "Tate Britain": 82215,
    },
    {
      date: new Date(2004, 4, 1),
      "Tate Modern": 319245,
      "Tate Britain": 63315,
    },
    {
      date: new Date(2004, 5, 1),
      "Tate Modern": 393766,
      "Tate Britain": 68627,
    },
    {
      date: new Date(2004, 6, 1),
      "Tate Modern": 468903,
      "Tate Britain": 94343,
    },
    {
      date: new Date(2004, 7, 1),
      "Tate Modern": 512807,
      "Tate Britain": 108577,
    },
    {
      date: new Date(2004, 8, 1),
      "Tate Modern": 320110,
      "Tate Britain": 72756,
    },
    {
      date: new Date(2004, 9, 1),
      "Tate Modern": 361295,
      "Tate Britain": 116482,
    },
    {
      date: new Date(2004, 10, 1),
      "Tate Modern": 308698,
      "Tate Britain": 114781,
    },
    {
      date: new Date(2004, 11, 1),
      "Tate Modern": 274409,
      "Tate Britain": 84652,
    },
    {
      date: new Date(2005, 0, 1),
      "Tate Modern": 274829,
      "Tate Britain": 70043,
    },
    {
      date: new Date(2005, 1, 1),
      "Tate Modern": 284615,
      "Tate Britain": 198868,
    },
    {
      date: new Date(2005, 2, 1),
      "Tate Modern": 323881,
      "Tate Britain": 241796,
    },
    {
      date: new Date(2005, 3, 1),
      "Tate Modern": 301947,
      "Tate Britain": 247591,
    },
    {
      date: new Date(2005, 4, 1),
      "Tate Modern": 279248,
      "Tate Britain": 179741,
    },
    {
      date: new Date(2005, 5, 1),
      "Tate Modern": 359059,
      "Tate Britain": 74463,
    },
    {
      date: new Date(2005, 6, 1),
      "Tate Modern": 347468,
      "Tate Britain": 86742,
    },
    {
      date: new Date(2005, 7, 1),
      "Tate Modern": 328504,
      "Tate Britain": 83305,
    },
    {
      date: new Date(2005, 8, 1),
      "Tate Modern": 351934,
      "Tate Britain": 78505,
    },
    {
      date: new Date(2005, 9, 1),
      "Tate Modern": 442868,
      "Tate Britain": 171689,
    },
    {
      date: new Date(2005, 10, 1),
      "Tate Modern": 321294,
      "Tate Britain": 170853,
    },
    {
      date: new Date(2005, 11, 1),
      "Tate Modern": 286370,
      "Tate Britain": 129524,
    },
    {
      date: new Date(2006, 0, 1),
      "Tate Modern": 314454,
      "Tate Britain": 140825,
    },
    {
      date: new Date(2006, 1, 1),
      "Tate Modern": 303749,
      "Tate Britain": 119974,
    },
    {
      date: new Date(2006, 2, 1),
      "Tate Modern": 321131,
      "Tate Britain": 140147,
    },
    {
      date: new Date(2006, 3, 1),
      "Tate Modern": 390294,
      "Tate Britain": 124153,
    },
    {
      date: new Date(2006, 4, 1),
      "Tate Modern": 374464,
      "Tate Britain": 85218,
    },
    {
      date: new Date(2006, 5, 1),
      "Tate Modern": 335428,
      "Tate Britain": 123950,
    },
    {
      date: new Date(2006, 6, 1),
      "Tate Modern": 437806,
      "Tate Britain": 130378,
    },
    {
      date: new Date(2006, 7, 1),
      "Tate Modern": 480753,
      "Tate Britain": 153279,
    },
    {
      date: new Date(2006, 8, 1),
      "Tate Modern": 459838,
      "Tate Britain": 85238,
    },
    {
      date: new Date(2006, 9, 1),
      "Tate Modern": 622330,
      "Tate Britain": 170075,
    },
    {
      date: new Date(2006, 10, 1),
      "Tate Modern": 455170,
      "Tate Britain": 176751,
    },
    {
      date: new Date(2006, 11, 1),
      "Tate Modern": 419959,
      "Tate Britain": 147371,
    },
    {
      date: new Date(2007, 0, 1),
      "Tate Modern": 369659,
      "Tate Britain": 130737,
    },
    {
      date: new Date(2007, 1, 1),
      "Tate Modern": 424594,
      "Tate Britain": 158744,
    },
    {
      date: new Date(2007, 2, 1),
      "Tate Modern": 464213,
      "Tate Britain": 179811,
    },
    {
      date: new Date(2007, 3, 1),
      "Tate Modern": 466406,
      "Tate Britain": 152384,
    },
    {
      date: new Date(2007, 4, 1),
      "Tate Modern": 377818,
      "Tate Britain": 108264,
    },
    {
      date: new Date(2007, 5, 1),
      "Tate Modern": 387742,
      "Tate Britain": 115782,
    },
    {
      date: new Date(2007, 6, 1),
      "Tate Modern": 469704,
      "Tate Britain": 117993,
    },
    {
      date: new Date(2007, 7, 1),
      "Tate Modern": 485799,
      "Tate Britain": 129129,
    },
    {
      date: new Date(2007, 8, 1),
      "Tate Modern": 347411,
      "Tate Britain": 87065,
    },
    {
      date: new Date(2007, 9, 1),
      "Tate Modern": 539989,
      "Tate Britain": 154457,
    },
    {
      date: new Date(2007, 10, 1),
      "Tate Modern": 464193,
      "Tate Britain": 144865,
    },
    {
      date: new Date(2007, 11, 1),
      "Tate Modern": 394312,
      "Tate Britain": 114046,
    },
    {
      date: new Date(2008, 0, 1),
      "Tate Modern": 393408,
      "Tate Britain": 127872,
    },
    {
      date: new Date(2008, 1, 1),
      "Tate Modern": 436752,
      "Tate Britain": 134969,
    },
    {
      date: new Date(2008, 2, 1),
      "Tate Modern": 473168,
      "Tate Britain": 146421,
    },
    {
      date: new Date(2008, 3, 1),
      "Tate Modern": 365447,
      "Tate Britain": 138119,
    },
    {
      date: new Date(2008, 4, 1),
      "Tate Modern": 405696,
      "Tate Britain": 96816,
    },
    {
      date: new Date(2008, 5, 1),
      "Tate Modern": 385546,
      "Tate Britain": 95746,
    },
    {
      date: new Date(2008, 6, 1),
      "Tate Modern": 386000,
      "Tate Britain": 112746,
    },
    {
      date: new Date(2008, 7, 1),
      "Tate Modern": 472907,
      "Tate Britain": 118294,
    },
    {
      date: new Date(2008, 8, 1),
      "Tate Modern": 367947,
      "Tate Britain": 136605,
    },
    {
      date: new Date(2008, 9, 1),
      "Tate Modern": 487430,
      "Tate Britain": 199997,
    },
    {
      date: new Date(2008, 10, 1),
      "Tate Modern": 372444,
      "Tate Britain": 172007,
    },
    {
      date: new Date(2008, 11, 1),
      "Tate Modern": 315836,
      "Tate Britain": 138717,
    },
    {
      date: new Date(2009, 0, 1),
      "Tate Modern": 344887,
      "Tate Britain": 118376,
    },
    {
      date: new Date(2009, 1, 1),
      "Tate Modern": 361950,
      "Tate Britain": 122786,
    },
    {
      date: new Date(2009, 2, 1),
      "Tate Modern": 381791,
      "Tate Britain": 137446,
    },
    {
      date: new Date(2009, 3, 1),
      "Tate Modern": 397980,
      "Tate Britain": 125360,
    },
    {
      date: new Date(2009, 4, 1),
      "Tate Modern": 421466,
      "Tate Britain": 105269,
    },
    {
      date: new Date(2009, 5, 1),
      "Tate Modern": 357078,
      "Tate Britain": 103951,
    },
    {
      date: new Date(2009, 6, 1),
      "Tate Modern": 458725,
      "Tate Britain": 115899,
    },
    {
      date: new Date(2009, 7, 1),
      "Tate Modern": 470642,
      "Tate Britain": 111567,
    },
    {
      date: new Date(2009, 8, 1),
      "Tate Modern": 371176,
      "Tate Britain": 101568,
    },
    {
      date: new Date(2009, 9, 1),
      "Tate Modern": 500192,
      "Tate Britain": 176530,
    },
    {
      date: new Date(2009, 10, 1),
      "Tate Modern": 358916,
      "Tate Britain": 154266,
    },
    {
      date: new Date(2009, 11, 1),
      "Tate Modern": 323242,
      "Tate Britain": 128819,
    },
    {
      date: new Date(2010, 0, 1),
      "Tate Modern": 349055,
      "Tate Britain": 159282,
    },
    {
      date: new Date(2010, 1, 1),
      "Tate Modern": 380514,
      "Tate Britain": 148516,
    },
    {
      date: new Date(2010, 2, 1),
      "Tate Modern": 399203,
      "Tate Britain": 163368,
    },
    {
      date: new Date(2010, 3, 1),
      "Tate Modern": 391680,
      "Tate Britain": 139862,
    },
    {
      date: new Date(2010, 4, 1),
      "Tate Modern": 443490,
      "Tate Britain": 139404,
    },
    {
      date: new Date(2010, 5, 1),
      "Tate Modern": 366603,
      "Tate Britain": 125357,
    },
    {
      date: new Date(2010, 6, 1),
      "Tate Modern": 478836,
      "Tate Britain": 155331,
    },
    {
      date: new Date(2010, 7, 1),
      "Tate Modern": 506151,
      "Tate Britain": 158909,
    },
    {
      date: new Date(2010, 8, 1),
      "Tate Modern": 370181,
      "Tate Britain": 111759,
    },
    {
      date: new Date(2010, 9, 1),
      "Tate Modern": 623328,
      "Tate Britain": 153689,
    },
    {
      date: new Date(2010, 10, 1),
      "Tate Modern": 435048,
      "Tate Britain": 122231,
    },
    {
      date: new Date(2010, 11, 1),
      "Tate Modern": 317083,
      "Tate Britain": 87583,
    },
  ];
}

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 is also enabled, its scroll interactions take precedence.

Visibility Copy Link

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

main.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");

data.ts

// Source: https://www.gov.uk/government/statistical-data-sets/museums-and-galleries-monthly-visits
export function getData(): any[] {
  return [
    {
      date: new Date(2004, 3, 1),
      "Tate Modern": 304991,
      "Tate Britain": 82215,
    },
    {
      date: new Date(2004, 4, 1),
      "Tate Modern": 319245,
      "Tate Britain": 63315,
    },
    {
      date: new Date(2004, 5, 1),
      "Tate Modern": 393766,
      "Tate Britain": 68627,
    },
    {
      date: new Date(2004, 6, 1),
      "Tate Modern": 468903,
      "Tate Britain": 94343,
    },
    {
      date: new Date(2004, 7, 1),
      "Tate Modern": 512807,
      "Tate Britain": 108577,
    },
    {
      date: new Date(2004, 8, 1),
      "Tate Modern": 320110,
      "Tate Britain": 72756,
    },
    {
      date: new Date(2004, 9, 1),
      "Tate Modern": 361295,
      "Tate Britain": 116482,
    },
    {
      date: new Date(2004, 10, 1),
      "Tate Modern": 308698,
      "Tate Britain": 114781,
    },
    {
      date: new Date(2004, 11, 1),
      "Tate Modern": 274409,
      "Tate Britain": 84652,
    },
    {
      date: new Date(2005, 0, 1),
      "Tate Modern": 274829,
      "Tate Britain": 70043,
    },
    {
      date: new Date(2005, 1, 1),
      "Tate Modern": 284615,
      "Tate Britain": 198868,
    },
    {
      date: new Date(2005, 2, 1),
      "Tate Modern": 323881,
      "Tate Britain": 241796,
    },
    {
      date: new Date(2005, 3, 1),
      "Tate Modern": 301947,
      "Tate Britain": 247591,
    },
    {
      date: new Date(2005, 4, 1),
      "Tate Modern": 279248,
      "Tate Britain": 179741,
    },
    {
      date: new Date(2005, 5, 1),
      "Tate Modern": 359059,
      "Tate Britain": 74463,
    },
    {
      date: new Date(2005, 6, 1),
      "Tate Modern": 347468,
      "Tate Britain": 86742,
    },
    {
      date: new Date(2005, 7, 1),
      "Tate Modern": 328504,
      "Tate Britain": 83305,
    },
    {
      date: new Date(2005, 8, 1),
      "Tate Modern": 351934,
      "Tate Britain": 78505,
    },
    {
      date: new Date(2005, 9, 1),
      "Tate Modern": 442868,
      "Tate Britain": 171689,
    },
    {
      date: new Date(2005, 10, 1),
      "Tate Modern": 321294,
      "Tate Britain": 170853,
    },
    {
      date: new Date(2005, 11, 1),
      "Tate Modern": 286370,
      "Tate Britain": 129524,
    },
    {
      date: new Date(2006, 0, 1),
      "Tate Modern": 314454,
      "Tate Britain": 140825,
    },
    {
      date: new Date(2006, 1, 1),
      "Tate Modern": 303749,
      "Tate Britain": 119974,
    },
    {
      date: new Date(2006, 2, 1),
      "Tate Modern": 321131,
      "Tate Britain": 140147,
    },
    {
      date: new Date(2006, 3, 1),
      "Tate Modern": 390294,
      "Tate Britain": 124153,
    },
    {
      date: new Date(2006, 4, 1),
      "Tate Modern": 374464,
      "Tate Britain": 85218,
    },
    {
      date: new Date(2006, 5, 1),
      "Tate Modern": 335428,
      "Tate Britain": 123950,
    },
    {
      date: new Date(2006, 6, 1),
      "Tate Modern": 437806,
      "Tate Britain": 130378,
    },
    {
      date: new Date(2006, 7, 1),
      "Tate Modern": 480753,
      "Tate Britain": 153279,
    },
    {
      date: new Date(2006, 8, 1),
      "Tate Modern": 459838,
      "Tate Britain": 85238,
    },
    {
      date: new Date(2006, 9, 1),
      "Tate Modern": 622330,
      "Tate Britain": 170075,
    },
    {
      date: new Date(2006, 10, 1),
      "Tate Modern": 455170,
      "Tate Britain": 176751,
    },
    {
      date: new Date(2006, 11, 1),
      "Tate Modern": 419959,
      "Tate Britain": 147371,
    },
    {
      date: new Date(2007, 0, 1),
      "Tate Modern": 369659,
      "Tate Britain": 130737,
    },
    {
      date: new Date(2007, 1, 1),
      "Tate Modern": 424594,
      "Tate Britain": 158744,
    },
    {
      date: new Date(2007, 2, 1),
      "Tate Modern": 464213,
      "Tate Britain": 179811,
    },
    {
      date: new Date(2007, 3, 1),
      "Tate Modern": 466406,
      "Tate Britain": 152384,
    },
    {
      date: new Date(2007, 4, 1),
      "Tate Modern": 377818,
      "Tate Britain": 108264,
    },
    {
      date: new Date(2007, 5, 1),
      "Tate Modern": 387742,
      "Tate Britain": 115782,
    },
    {
      date: new Date(2007, 6, 1),
      "Tate Modern": 469704,
      "Tate Britain": 117993,
    },
    {
      date: new Date(2007, 7, 1),
      "Tate Modern": 485799,
      "Tate Britain": 129129,
    },
    {
      date: new Date(2007, 8, 1),
      "Tate Modern": 347411,
      "Tate Britain": 87065,
    },
    {
      date: new Date(2007, 9, 1),
      "Tate Modern": 539989,
      "Tate Britain": 154457,
    },
    {
      date: new Date(2007, 10, 1),
      "Tate Modern": 464193,
      "Tate Britain": 144865,
    },
    {
      date: new Date(2007, 11, 1),
      "Tate Modern": 394312,
      "Tate Britain": 114046,
    },
    {
      date: new Date(2008, 0, 1),
      "Tate Modern": 393408,
      "Tate Britain": 127872,
    },
    {
      date: new Date(2008, 1, 1),
      "Tate Modern": 436752,
      "Tate Britain": 134969,
    },
    {
      date: new Date(2008, 2, 1),
      "Tate Modern": 473168,
      "Tate Britain": 146421,
    },
    {
      date: new Date(2008, 3, 1),
      "Tate Modern": 365447,
      "Tate Britain": 138119,
    },
    {
      date: new Date(2008, 4, 1),
      "Tate Modern": 405696,
      "Tate Britain": 96816,
    },
    {
      date: new Date(2008, 5, 1),
      "Tate Modern": 385546,
      "Tate Britain": 95746,
    },
    {
      date: new Date(2008, 6, 1),
      "Tate Modern": 386000,
      "Tate Britain": 112746,
    },
    {
      date: new Date(2008, 7, 1),
      "Tate Modern": 472907,
      "Tate Britain": 118294,
    },
    {
      date: new Date(2008, 8, 1),
      "Tate Modern": 367947,
      "Tate Britain": 136605,
    },
    {
      date: new Date(2008, 9, 1),
      "Tate Modern": 487430,
      "Tate Britain": 199997,
    },
    {
      date: new Date(2008, 10, 1),
      "Tate Modern": 372444,
      "Tate Britain": 172007,
    },
    {
      date: new Date(2008, 11, 1),
      "Tate Modern": 315836,
      "Tate Britain": 138717,
    },
    {
      date: new Date(2009, 0, 1),
      "Tate Modern": 344887,
      "Tate Britain": 118376,
    },
    {
      date: new Date(2009, 1, 1),
      "Tate Modern": 361950,
      "Tate Britain": 122786,
    },
    {
      date: new Date(2009, 2, 1),
      "Tate Modern": 381791,
      "Tate Britain": 137446,
    },
    {
      date: new Date(2009, 3, 1),
      "Tate Modern": 397980,
      "Tate Britain": 125360,
    },
    {
      date: new Date(2009, 4, 1),
      "Tate Modern": 421466,
      "Tate Britain": 105269,
    },
    {
      date: new Date(2009, 5, 1),
      "Tate Modern": 357078,
      "Tate Britain": 103951,
    },
    {
      date: new Date(2009, 6, 1),
      "Tate Modern": 458725,
      "Tate Britain": 115899,
    },
    {
      date: new Date(2009, 7, 1),
      "Tate Modern": 470642,
      "Tate Britain": 111567,
    },
    {
      date: new Date(2009, 8, 1),
      "Tate Modern": 371176,
      "Tate Britain": 101568,
    },
    {
      date: new Date(2009, 9, 1),
      "Tate Modern": 500192,
      "Tate Britain": 176530,
    },
    {
      date: new Date(2009, 10, 1),
      "Tate Modern": 358916,
      "Tate Britain": 154266,
    },
    {
      date: new Date(2009, 11, 1),
      "Tate Modern": 323242,
      "Tate Britain": 128819,
    },
    {
      date: new Date(2010, 0, 1),
      "Tate Modern": 349055,
      "Tate Britain": 159282,
    },
    {
      date: new Date(2010, 1, 1),
      "Tate Modern": 380514,
      "Tate Britain": 148516,
    },
    {
      date: new Date(2010, 2, 1),
      "Tate Modern": 399203,
      "Tate Britain": 163368,
    },
    {
      date: new Date(2010, 3, 1),
      "Tate Modern": 391680,
      "Tate Britain": 139862,
    },
    {
      date: new Date(2010, 4, 1),
      "Tate Modern": 443490,
      "Tate Britain": 139404,
    },
    {
      date: new Date(2010, 5, 1),
      "Tate Modern": 366603,
      "Tate Britain": 125357,
    },
    {
      date: new Date(2010, 6, 1),
      "Tate Modern": 478836,
      "Tate Britain": 155331,
    },
    {
      date: new Date(2010, 7, 1),
      "Tate Modern": 506151,
      "Tate Britain": 158909,
    },
    {
      date: new Date(2010, 8, 1),
      "Tate Modern": 370181,
      "Tate Britain": 111759,
    },
    {
      date: new Date(2010, 9, 1),
      "Tate Modern": 623328,
      "Tate Britain": 153689,
    },
    {
      date: new Date(2010, 10, 1),
      "Tate Modern": 435048,
      "Tate Britain": 122231,
    },
    {
      date: new Date(2010, 11, 1),
      "Tate Modern": 317083,
      "Tate Britain": 87583,
    },
  ];
}

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

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges

Vue ChartsScrollbar

Simple Scrollbar Copy Link

Vertical and Horizontal Scrollbars Copy Link

Position Copy Link

Placement and Spacing Copy Link

Customisation Copy Link

Interactivity Copy Link

Scrolling Copy Link

Visibility Copy Link

API Reference Copy Link