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 { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgCartesianChartOptions,
BarSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
BarSeriesModule,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
LegendModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
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,
},
};
}
}
// 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,
},
];
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
{
scrollbar: {
enabled: true,
},
} Vertical and Horizontal Scrollbars Copy Link
Both vertical and horizontal Scrollbars are shown when necessary.
import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgCartesianChartOptions,
BarSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
BarSeriesModule,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
LegendModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
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",
},
},
};
}
}
// 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,
},
];
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
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 { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
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,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<div class="example-controls">
<div class="controls-row">
<span>Vertical:</span>
<div class="button-group gap-right" role="group" aria-label="Vertical">
<input type="radio" id="vertical-left" name="vertical-position" value="left" (change)="setVerticalPosition($event)">
<label for="vertical-left">Left</label>
<input type="radio" id="vertical-right" name="vertical-position" value="right" checked="" (change)="setVerticalPosition($event)">
<label for="vertical-right">Right</label>
</div>
<span>Horizontal:</span>
<div class="button-group" role="group" aria-label="Horizontal">
<input type="radio" id="horizontal-top" name="horizontal-position" value="top" (change)="setHorizontalPosition($event)">
<label for="horizontal-top">Top</label>
<input type="radio" id="horizontal-bottom" name="horizontal-position" value="bottom" checked="" (change)="setHorizontalPosition($event)">
<label for="horizontal-bottom">Bottom</label>
</div>
</div>
</div>
<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
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",
},
horizontal: {
position: "bottom",
},
},
initialState: {
zoom: {
ratioX: { start: 0.1, end: 0.5 },
ratioY: { start: 0.2, end: 0.75 },
},
},
};
}
setVerticalPosition = (event: Event) => {
const options = clone(this.options);
const value = (event.target as HTMLInputElement).value as "left" | "right";
options.scrollbar = {
...options.scrollbar,
vertical: {
...options.scrollbar!.vertical,
position: value,
},
};
this.options = options;
};
setHorizontalPosition = (event: Event) => {
const options = clone(this.options);
const value = (event.target as HTMLInputElement).value as "top" | "bottom";
options.scrollbar = {
...options.scrollbar,
horizontal: {
...options.scrollbar!.horizontal,
position: value,
},
};
this.options = options;
};
}
// 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,
},
];
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
{
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 { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
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,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<div class="example-controls">
<div class="controls-row">
<span>Placement:</span>
<div class="button-group" role="group" aria-label="Placement">
<input type="radio" id="placement-outer" name="placement" value="outer" (change)="setPlacement($event)">
<label for="placement-outer">Outer</label>
<input type="radio" id="placement-inner" name="placement" value="inner" checked="" (change)="setPlacement($event)">
<label for="placement-inner">Inner</label>
</div>
</div>
<div class="controls-row">
<label for="spacingSlider">spacing:</label>
<input type="range" id="spacingSlider" min="0" max="25" value="0" (input)="setSpacing($event)" (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" (input)="setTickSpacing($event)" (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" (change)="setTicksEnabled($event.target.checked)">
<label for="ticksEnabled">Enable Ticks</label>
</div>
</div>
<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
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,
},
};
}
ngOnInit() {
updateTickSpacingEnabled();
}
setPlacement = (event: Event) => {
const options = clone(this.options);
const value = (event.target as HTMLInputElement)
.value as AgScrollbarPlacement;
placement = value;
options.scrollbar!.placement = value;
updateTickSpacingEnabled();
this.options = options;
};
setSpacing = (event: any) => {
const options = clone(this.options);
const value = +event.target.value;
options.scrollbar!.spacing = value;
document.getElementById("spacingValue")!.innerHTML = String(value);
this.options = options;
};
setTickSpacing = (event: any) => {
const options = clone(this.options);
const value = +event.target.value;
options.scrollbar!.tickSpacing = value;
document.getElementById("tickSpacingValue")!.innerHTML = String(value);
this.options = options;
};
setTicksEnabled = (enabled: boolean) => {
const options = clone(this.options);
ticksEnabled = enabled;
(options.axes as any).x.tick.enabled = enabled;
updateTickSpacingEnabled();
this.options = options;
};
}
// 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,
},
];
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
{
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 { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
AgCartesianChartOptions,
BarSeriesModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
BarSeriesModule,
NumberAxisModule,
OrdinalTimeAxisModule,
ScrollbarModule,
LegendModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
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",
},
},
},
};
}
}
// 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,
},
];
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
{
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 { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
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,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<div class="example-controls">
<div class="controls-row">
<span>Axis Scrolling:</span>
<div class="button-group gap-right" role="group" aria-label="Axis Scrolling">
<input type="radio" id="axis-scrolling-enable" name="axis-scrolling" value="true" checked="" (change)="setAxisScrolling($event)">
<label for="axis-scrolling-enable">Enable</label>
<input type="radio" id="axis-scrolling-disable" name="axis-scrolling" value="false" (change)="setAxisScrolling($event)">
<label for="axis-scrolling-disable">Disable</label>
</div>
<span>Series Area Scrolling:</span>
<div class="button-group" role="group" aria-label="Series Area Scrolling">
<input type="radio" id="series-area-scrolling-enable" name="series-area-scrolling" value="true" checked="" (change)="setSeriesAreaScrolling($event)">
<label for="series-area-scrolling-enable">Enable</label>
<input type="radio" id="series-area-scrolling-disable" name="series-area-scrolling" value="false" (change)="setSeriesAreaScrolling($event)">
<label for="series-area-scrolling-disable">Disable</label>
</div>
</div>
</div>
<ag-charts
[options]="options"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
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",
},
},
};
}
setSeriesAreaScrolling = (event: Event) => {
const options = clone(this.options);
options.scrollbar!.enableSeriesAreaScrolling =
(event.target as HTMLInputElement).value === "true";
this.options = options;
};
setAxisScrolling = (event: Event) => {
const options = clone(this.options);
options.scrollbar!.enableAxisScrolling =
(event.target as HTMLInputElement).value === "true";
this.options = options;
};
}
// 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,
},
];
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
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 { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
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,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgCharts],
template: `<div class="example-controls">
<div class="controls-row">
<label for="visibility">Visibility:</label>
<select id="visibility" (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"
></ag-charts>
`,
})
export class AppComponent {
public options;
constructor() {
this.options = {
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",
},
};
}
setVisibility = (value: AgScrollbarVisibility) => {
const options = clone(this.options);
options.scrollbar!.visible = value;
this.options = options;
};
}
// 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,
},
];
}
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent);
{
scrollbar: {
enabled: true,
visible: 'always',
},
}In this example:
'auto'(default) - shows the Scrollbar only when the data does not fit within the viewport.'always'- always shows the Scrollbar.'never'- hides the Scrollbar even when it is needed.
API Reference Copy Link
Properties available on the AgScrollbarOptions interface.
- enableAxisScrolling
booleandefault: false - Whether scrolling on the axis should scroll the scrollbar.
- enableSeriesAreaScrolling
booleandefault: true - Whether scrolling on the series area should scroll the scrollbar.
- horizontal
AgScrollbarHorizontalOrientationOptions - Options applied to the horizontal scrollbar.
- vertical
AgScrollbarVerticalOrientationOptions - Options applied to the vertical scrollbar.
- enabled
boolean - Set to `true` to enable the scrollbar.
- thickness
number - Thickness of the scrollbar in pixels (height for horizontal, width for vertical).
- spacing
number - Spacing in pixels between the scrollbar and the series area or axis labels, depending on placement.
- tickSpacing
number - Spacing in pixels between ticks on the scrollbar (if applicable).
- track
AgScrollbarTrackStyle - Styling options for the scrollbar track.
- thumb
AgScrollbarThumbStyle - Styling options for the scrollbar thumb.
- visible
AgScrollbarVisibility - Controls when the scrollbar is shown.
- placement
AgScrollbarPlacement - Controls whether the scrollbar is placed inside the axis label and ticks or outside.
Properties available on the AgScrollbarOptions interface.
- enableAxisScrolling
booleandefault: false - Whether scrolling on the axis should scroll the scrollbar.
- enableSeriesAreaScrolling
booleandefault: true - Whether scrolling on the series area should scroll the scrollbar.
- horizontal
AgScrollbarHorizontalOrientationOptions - Options applied to the horizontal scrollbar.
- vertical
AgScrollbarVerticalOrientationOptions - Options applied to the vertical scrollbar.
- enabled
boolean - Set to `true` to enable the scrollbar.
- thickness
number - Thickness of the scrollbar in pixels (height for horizontal, width for vertical).
- spacing
number - Spacing in pixels between the scrollbar and the series area or axis labels, depending on placement.
- tickSpacing
number - Spacing in pixels between ticks on the scrollbar (if applicable).
- track
AgScrollbarTrackStyle - Styling options for the scrollbar track.
- thumb
AgScrollbarThumbStyle - Styling options for the scrollbar thumb.
- visible
AgScrollbarVisibility - Controls when the scrollbar is shown.
- placement
AgScrollbarPlacement - Controls whether the scrollbar is placed inside the axis label and ticks or outside.