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.
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgCartesianChartOptions,
BarSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
BarSeriesModule,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
LegendModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
title: {
text: "Museum Visitors",
},
subtitle: {
text: "Fixed bar widths require panning with the scrollbar",
},
data: getData(),
series: [
{
type: "bar",
xKey: "date",
yKey: "Tate Modern",
yName: "Tate Modern",
width: 12,
},
{
type: "bar",
xKey: "date",
yKey: "Tate Britain",
yName: "Tate Britain",
width: 12,
},
],
axes: {
x: {
type: "ordinal-time",
interval: { maxSpacing: 200 },
},
y: {
type: "number",
label: {
formatter: (params) => `${params.value / 1000}k`,
},
},
},
scrollbar: {
enabled: true,
},
});
return <AgCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
// 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.
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgCartesianChartOptions,
BarSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
BarSeriesModule,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
LegendModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
title: {
text: "Museum Visitors",
},
subtitle: {
text: "Vertical Scrollbar is used when panning vertically is required",
},
data: getData(),
series: [
{
type: "bar",
direction: "horizontal",
xKey: "date",
yKey: "Tate Modern",
yName: "Tate Modern",
width: 12,
},
{
type: "bar",
direction: "horizontal",
xKey: "date",
yKey: "Tate Britain",
yName: "Tate Britain",
width: 12,
},
],
axes: {
y: {
type: "ordinal-time",
interval: { maxSpacing: 200 },
},
x: {
type: "number",
label: {
formatter: (params) => `${params.value / 1000}k`,
},
},
},
scrollbar: {
enabled: true,
vertical: {
position: "left",
},
},
});
return <AgCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
// 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.
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgCartesianChartOptions,
AreaSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";
ModuleRegistry.registerModules([
AreaSeriesModule,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
ZoomModule,
LegendModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
title: {
text: "Museum Visitors",
},
data: getData(),
series: [
{
type: "area",
xKey: "date",
yKey: "Tate Modern",
yName: "Tate Modern",
stacked: true,
},
{
type: "area",
xKey: "date",
yKey: "Tate Britain",
yName: "Tate Britain",
stacked: true,
},
],
axes: {
x: {
type: "ordinal-time",
interval: { maxSpacing: 200 },
},
y: {
type: "number",
label: {
formatter: (params) => `${params.value / 1000}k`,
},
},
},
scrollbar: {
enabled: true,
vertical: {
position: "right",
},
},
initialState: {
zoom: {
ratioX: { start: 0.1, end: 0.5 },
ratioY: { start: 0.2, end: 0.75 },
},
},
});
const setVerticalPosition = (value: "left" | "right") => {
const nextOptions = clone(options);
nextOptions.scrollbar = {
...nextOptions.scrollbar,
vertical: {
...nextOptions.scrollbar!.vertical,
position: value,
},
};
setOptions(nextOptions);
};
const setHorizontalPosition = (value: "top" | "bottom") => {
const nextOptions = clone(options);
nextOptions.scrollbar = {
...nextOptions.scrollbar,
horizontal: {
...nextOptions.scrollbar!.horizontal,
position: value,
},
};
setOptions(nextOptions);
};
return (
<Fragment>
<div className="example-controls">
<div className="controls-row">
<label>Vertical:</label>
<button onClick={() => setVerticalPosition("left")}>Left</button>
<button onClick={() => setVerticalPosition("right")}>Right</button>
<label className="gap-left">Horizontal:</label>
<button onClick={() => setHorizontalPosition("top")}>Top</button>
<button onClick={() => setHorizontalPosition("bottom")}>
Bottom
</button>
</div>
</div>
<AgCharts options={options} />
</Fragment>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
// 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,
positionmatches the primary axis for each direction.
Placement and Spacing Copy Link
The placement property determines where the Scrollbar appears within the axis layout.
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgCartesianChartOptions,
AgScrollbarPlacement,
BarSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";
let placement: AgScrollbarPlacement = "inner";
let ticksEnabled = false;
// tickSpacing only affects the layout when the scrollbar is placed 'inner' and axis ticks are enabled,
// so disable the control in every other case to make it clear it has no effect.
function updateTickSpacingEnabled() {
const tickSpacingGroup = document.getElementById(
"tickSpacingGroup",
) as HTMLFieldSetElement;
tickSpacingGroup.disabled = !(placement === "inner" && ticksEnabled);
}
ModuleRegistry.registerModules([
BarSeriesModule,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
LegendModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
title: {
text: "Museum Visitors",
},
data: getData(),
series: [
{
type: "bar",
xKey: "date",
yKey: "Tate Modern",
yName: "Tate Modern",
width: 12,
},
{
type: "bar",
xKey: "date",
yKey: "Tate Britain",
yName: "Tate Britain",
width: 12,
},
],
axes: {
x: {
type: "ordinal-time",
title: {
text: "Date",
},
tick: { enabled: false },
interval: { maxSpacing: 200 },
},
y: {
type: "number",
label: {
formatter: (params) => `${params.value / 1000}k`,
},
},
},
scrollbar: {
enabled: true,
placement: "inner",
spacing: 0,
tickSpacing: 0,
},
});
const setPlacement = (value: AgScrollbarPlacement) => {
const nextOptions = clone(options);
placement = value;
nextOptions.scrollbar!.placement = value;
updateTickSpacingEnabled();
setOptions(nextOptions);
};
const setSpacing = (event: any) => {
const nextOptions = clone(options);
const value = +event.target.value;
nextOptions.scrollbar!.spacing = value;
document.getElementById("spacingValue")!.innerHTML = String(value);
setOptions(nextOptions);
};
const setTickSpacing = (event: any) => {
const nextOptions = clone(options);
const value = +event.target.value;
nextOptions.scrollbar!.tickSpacing = value;
document.getElementById("tickSpacingValue")!.innerHTML = String(value);
setOptions(nextOptions);
};
const setTicksEnabled = (enabled: boolean) => {
const nextOptions = clone(options);
ticksEnabled = enabled;
(nextOptions.axes as any).x.tick.enabled = enabled;
updateTickSpacingEnabled();
setOptions(nextOptions);
};
return (
<Fragment>
<div className="example-controls">
<div className="controls-row">
<label>Placement:</label>
<button onClick={() => setPlacement("outer")}>Outer</button>
<button onClick={() => setPlacement("inner")}>Inner</button>
</div>
<div className="controls-row">
<label htmlFor="spacingSlider">spacing:</label>
<input
type="range"
id="spacingSlider"
min="0"
max="25"
defaultValue="0"
onInput={(event) => setSpacing(event)}
onChange={(event) => setSpacing(event)}
/>
<span
id="spacingValue"
style={{
display: "inline-block",
minWidth: "3ch",
textAlign: "right",
}}
>
0
</span>
<fieldset id="tickSpacingGroup" className="control-group" disabled="">
<label htmlFor="tickSpacingSlider" className="gap-left">
tickSpacing:
</label>
<input
type="range"
id="tickSpacingSlider"
min="0"
max="25"
defaultValue="0"
onInput={(event) => setTickSpacing(event)}
onChange={(event) => setTickSpacing(event)}
/>
<span
id="tickSpacingValue"
style={{
display: "inline-block",
minWidth: "3ch",
textAlign: "right",
}}
>
0
</span>
</fieldset>
<input
type="checkbox"
id="ticksEnabled"
className="gap-left"
onChange={(event) => setTicksEnabled(event.target.checked)}
/>
<label htmlFor="ticksEnabled">Enable Ticks</label>
</div>
</div>
<AgCharts options={options} />
</Fragment>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
// 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
placementoption:'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
spacingvalue controls the gap between the Scrollbar and the series area or axis labels. - The
tickSpacingvalue controls the gap between axis ticks and aninnerScrollbar.
- The
Customisation Copy Link
Use the track and thumb properties to style the Scrollbar components.
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgCartesianChartOptions,
BarSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
BarSeriesModule,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
LegendModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
title: {
text: "Museum Visitors",
},
data: getData(),
series: [
{
type: "bar",
xKey: "date",
yKey: "Tate Modern",
yName: "Tate Modern",
width: 12,
},
{
type: "bar",
xKey: "date",
yKey: "Tate Britain",
yName: "Tate Britain",
width: 12,
},
],
axes: {
x: {
type: "ordinal-time",
position: "bottom",
},
y: {
type: "number",
label: {
formatter: (params) => `${params.value / 1000}k`,
},
},
},
scrollbar: {
enabled: true,
thickness: 12,
track: {
fill: "#e2e8f0",
cornerRadius: 0,
strokeWidth: 0,
},
thumb: {
fill: "#3b82f6",
cornerRadius: 0,
strokeWidth: 1,
stroke: "#2563eb",
hoverStyle: {
fill: "#2563eb",
},
},
},
});
return <AgCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
// 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:
thicknesssets the height of horizontal scrollbars or width of vertical scrollbars.trackstyles the background area of the Scrollbar.thumbstyles the draggable indicator showing the current position.thumb.hoverStylecustomises 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.thicknessto 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.
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgCartesianChartOptions,
BarSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";
ModuleRegistry.registerModules([
BarSeriesModule,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
LegendModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
title: {
text: "Museum Visitors",
},
subtitle: {
text: "Scroll over the series area or axis to pan the chart",
},
data: getData(),
series: [
{
type: "bar",
direction: "horizontal",
xKey: "date",
yKey: "Tate Modern",
yName: "Tate Modern",
width: 12,
},
{
type: "bar",
direction: "horizontal",
xKey: "date",
yKey: "Tate Britain",
yName: "Tate Britain",
width: 12,
},
],
axes: {
y: {
type: "ordinal-time",
interval: { maxSpacing: 200 },
},
x: {
type: "number",
label: {
formatter: (params) => `${params.value / 1000}k`,
},
},
},
scrollbar: {
enabled: true,
enableSeriesAreaScrolling: true,
enableAxisScrolling: true,
vertical: {
position: "left",
},
},
});
const setSeriesAreaScrolling = (enabled: boolean) => {
const nextOptions = clone(options);
nextOptions.scrollbar!.enableSeriesAreaScrolling = enabled;
setOptions(nextOptions);
};
const setAxisScrolling = (enabled: boolean) => {
const nextOptions = clone(options);
nextOptions.scrollbar!.enableAxisScrolling = enabled;
setOptions(nextOptions);
};
return (
<Fragment>
<div className="example-controls">
<div className="controls-row">
<label>Axis Scrolling:</label>
<button onClick={() => setAxisScrolling(true)}>Enable</button>
<button onClick={() => setAxisScrolling(false)}>Disable</button>
<label>Series Area Scrolling:</label>
<button onClick={() => setSeriesAreaScrolling(true)}>Enable</button>
<button
className="gap-right"
onClick={() => setSeriesAreaScrolling(false)}
>
Disable
</button>
</div>
</div>
<AgCharts options={options} />
</Fragment>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
// 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:
enableAxisScrollingcontrols whether scrolling over the axis pans in that direction.enableSeriesAreaScrollingcontrols 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.
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgCartesianChartOptions,
AgScrollbarVisibility,
BarSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";
ModuleRegistry.registerModules([
BarSeriesModule,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
LegendModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
title: {
text: "Museum Visitors",
},
data: getData(),
series: [
{
type: "bar",
xKey: "date",
yKey: "Tate Modern",
yName: "Tate Modern",
width: 12,
},
{
type: "bar",
xKey: "date",
yKey: "Tate Britain",
yName: "Tate Britain",
width: 12,
},
],
axes: {
x: {
type: "ordinal-time",
interval: { maxSpacing: 200 },
},
y: {
type: "number",
label: {
formatter: (params) => `${params.value / 1000}k`,
},
},
},
scrollbar: {
enabled: true,
visible: "always",
},
});
const setVisibility = (value: AgScrollbarVisibility) => {
const nextOptions = clone(options);
nextOptions.scrollbar!.visible = value;
setOptions(nextOptions);
};
return (
<Fragment>
<div className="example-controls">
<div className="controls-row">
<label htmlFor="visibility">Visibility:</label>
<select
id="visibility"
onChange={(event) => setVisibility(event.target.value)}
>
<option value="always">always</option>
<option value="auto">auto</option>
<option value="never">never</option>
</select>
</div>
</div>
<AgCharts options={options} />
</Fragment>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
// 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.