This section compares the different axis types that are available to all sparklines.
In order to select an appropriate sparkline axis type, it is important to consider the data the sparkline is displaying. This ensures that X values are scaled correctly along the axis.
The following axis types are available to all sparklines:
- Category Axis - data points are evenly spread along the axis.
- Number Axis - data is spaced based on the magnitude of the X values.
- Time Axis - data is spaced according to the time between data points.
The Y values supplied in the sparkline data will always be plotted using the Number Axis on a continuous scale.
Here's an illustration showing how sparklines can look visually different when different axis types are configured.
Time Axis
Category Axis
- Note that the same data is used for both sparklines.
- On the left, X values are plotted using a Time Axis, whereas on the right, X values are plotted using a Category Axis.
Category Axis Copy Link
The Category Axis is the default axis. X values will be plotted on a band scale which means the data points will be evenly spaced out along the axis making it ideal for small datasets with discrete values or categories.
The Category Axis is configured through the Chart Category Axis Options as follows:
<ag-grid-angular
[columnDefs]="columnDefs"
/* other grid options ... */ />
this.columnDefs = [
{
field: 'rateOfChange',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
axis: {
// use Category Axis (Optional)
type: 'category'
}
}
},
},
// other column definitions ...
];In the snippet above, the axis type is set to 'category' but this is optional as the axis uses the 'category' axis by default.
The example below demonstrates the Category Axis used in an Area Sparkline. Note the following:
- The Rate Of Change column is mapped to data containing an Array of Tuples of type
[string, number][]. - The
stringX values are evenly spaced across the axis using a fixed width between each data point. - The
stringX values are included in the tooltip.
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
AgChartsCommunityModule,
AgSparklineOptions,
} from "ag-charts-community";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ClipboardModule,
ContextMenuModule,
SparklinesModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
SparklinesModule.with(AgChartsCommunityModule),
ClipboardModule,
ContextMenuModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowData]="rowData"
[rowHeight]="rowHeight"
/> `,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "symbol", maxWidth: 110 },
{ field: "name", minWidth: 250 },
{
field: "change",
cellRenderer: "agSparklineCellRenderer",
cellRendererParams: {
sparklineOptions: {
type: "area",
axis: {
// set axis to 'category'
type: "category",
},
} as AgSparklineOptions,
},
},
{ field: "volume", maxWidth: 140 },
];
defaultColDef: ColDef = {
flex: 1,
minWidth: 100,
};
rowData: any[] | null = getData();
rowHeight = 50;
}
export function getData(): any[] {
return [
{
symbol: 'A',
name: 'Agilent Technologies Inc. Common Stock',
volume: '$971,760',
change: [
['H', 19.76],
['N', 82.41],
['C', 92.73],
['J', 75.48],
['R', 86.8],
['S', 8.96],
['V', 37.67],
['W', 68.04],
['T', 18.43],
['M', 41.35],
['I', 32.11],
['E', 52.84],
],
},
{
symbol: 'AAL',
name: 'American Airlines Group Inc. Common Stock',
volume: '$20,309,670',
change: [
['X', 33.93],
['Q', -80.1],
['Z', -42.4],
['I', -89.4],
['K', -8.98],
['L', 34.8],
['E', -55.9],
['W', -31.9],
['D', 84.37],
['R', 3.23],
['H', -82],
['S', 3.17],
],
},
{
symbol: 'AAP',
name: 'Advance Auto Parts Inc Advance Auto Parts Inc W/I',
volume: '$699,427',
change: [
['Q', -86.2],
['K', -14.9],
['Y', -67.8],
['X', -41.2],
['R', 79.57],
['U', -96.7],
['J', 54.63],
['V', 44.47],
['D', 92.09],
['L', -71.6],
['M', -64.1],
['H', -11.5],
],
},
{
symbol: 'AAPL',
name: 'Apple Inc. Common Stock',
volume: '$57,807,909',
change: [
['E', -40.6],
['C', -48.07],
['G', -35.32],
['W', -92.55],
['H', -84.49],
['A', 23.72],
['L', -8.39],
['R', -46.75],
['T', -91.68],
['Q', -38.42],
['U', -90.4],
['S', 92.86],
],
},
{
symbol: 'ABB',
name: 'ABB Ltd Common Stock',
volume: '$901,811',
change: [
['R', 27.92],
['K', 78.59],
['C', -85.38],
['Z', -76],
['B', 72.19],
['X', 13.81],
['I', -76.99],
['Y', 89.68],
['A', 13],
['G', 32.89],
['T', 11.57],
['D', 81.91],
],
},
{
symbol: 'ABBV',
name: 'AbbVie Inc. Common Stock',
volume: '$5,364,090',
change: [
['K', 84.02],
['A', 74.34],
['X', 65.46],
['V', 32.27],
['Y', 58.87],
['C', 30.44],
['D', 9.11],
['O', 35.96],
['I', 22.52],
['Q', 40.04],
['L', 14.11],
['J', 1.98],
],
},
{
symbol: 'ABC',
name: 'AmerisourceBergen Corporation Common Stock',
volume: '$549,618',
change: [
['Y', 50.73],
['U', 24.81],
['E', -84],
['A', 19.03],
['X', 69.72],
['M', 70.3],
['C', 86.63],
['I', 83.77],
['O', 21.81],
['Z', 38.29],
['S', 93.69],
['G', 21.94],
],
},
{
symbol: 'ABEV',
name: 'Ambev S.A. American Depositary Shares',
volume: '$27,226,664',
change: [
['X', -22.48],
['D', -54.87],
['W', -76.5],
['J', -79.68],
['T', -82.13],
['K', -1.2],
['S', -34.04],
['R', -92.44],
['Y', -76.13],
['G', -86.27],
['B', -34.81],
['C', -88.12],
],
},
{
symbol: 'ABMD',
name: 'ABIOMED Inc. Common Stock',
volume: '$137,763',
change: [
['Z', -83.29],
['A', 52.28],
['K', 61.05],
['X', 14.37],
['J', 17.6],
['I', 34.12],
['N', 7.74],
['H', 60.32],
['L', -28.43],
['B', 71.11],
['O', 56.19],
['P', 1.24],
],
},
{
symbol: 'ABNB',
name: 'Airbnb Inc. Class A Common Stock',
volume: '$4,456,806',
change: [
['T', -37.3],
['H', 16.92],
['X', -19.8],
['M', -62.8],
['Z', -25.9],
['U', -8.53],
['B', -38.4],
['O', -93.9],
['V', 4.11],
['J', 79.6],
['R', 42.44],
['S', -36.5],
],
},
];
}
import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
enableProdMode();
}
const app = bootstrapApplication(AppComponent, {
providers: [provideHttpClient()],
});
Number Axis Copy Link
The Number Axis is used as a value axis. When the Number Axis is used, the distance between the data points depends on the magnitude of the X values. X values must be number values as they are plotted on a continuous scale with numeric intervals.
The Number Axis is configured through the Chart Number Axis Options as follows:
<ag-grid-angular
[columnDefs]="columnDefs"
/* other grid options ... */ />
this.columnDefs = [
{
field: 'history',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
axis: {
// use Number Axis
type: 'number'
}
}
},
},
// other column definitions ...
];In the snippet above, the axis type is set to 'number' to select a Number Axis instead of the default Category Axis.
The example below demonstrates the Number Axis used in an Area Sparkline. Note the following:
- The Rate Of Change column is mapped to data containing an Array of Tuples of type
[number, number][]. - The numeric X values are placed and spread along the axis based on the magnitude of the value.
- The numeric X values are included in the tooltip.
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
AgChartsCommunityModule,
AgSparklineOptions,
} from "ag-charts-community";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ClipboardModule,
ContextMenuModule,
SparklinesModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
SparklinesModule.with(AgChartsCommunityModule),
ClipboardModule,
ContextMenuModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowData]="rowData"
[rowHeight]="rowHeight"
/> `,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "symbol", maxWidth: 110 },
{ field: "name", minWidth: 250 },
{
field: "change",
cellRenderer: "agSparklineCellRenderer",
cellRendererParams: {
sparklineOptions: {
type: "area",
xKey: "xVal",
yKey: "yVal",
axis: {
// set axis type to 'number'
type: "number",
},
} as AgSparklineOptions,
},
},
{ field: "volume", maxWidth: 140 },
];
defaultColDef: ColDef = {
flex: 1,
minWidth: 100,
};
rowData: any[] | null = getData();
rowHeight = 50;
}
export function getData(): any[] {
return [
{
symbol: 'A',
name: 'Agilent Technologies Inc. Common Stock',
volume: '$971,760',
change: [
[1, -37.3],
[5, 16.92],
[6, -19.8],
[7, -62.8],
[8, -38.4],
[9, -93.9],
[10, -26.1],
[11, 79.6],
[16, 42.44],
],
},
{
symbol: 'AAL',
name: 'American Airlines Group Inc. Common Stock',
volume: '$20,309,670',
change: [
[3, 33.93],
[4, -80.1],
[7, -55.9],
[11, -1.84],
[13, -56.8],
[14, -70.3],
[20, -29.7],
[21, -7.13],
[22, -8.53],
],
},
{
symbol: 'AAP',
name: 'Advance Auto Parts Inc Advance Auto Parts Inc W/I',
volume: '$699,427',
change: [
[2, -86.2],
[3, -41.2],
[4, 79.57],
[12, 62.25],
[16, -11.5],
[17, 43.01],
[20, -47.2],
[21, -47.2],
[22, -22.5],
],
},
{
symbol: 'AAPL',
name: 'Apple Inc. Common Stock',
volume: '$57,807,909',
change: [
[3, -40.6],
[5, -48.07],
[5, -35.32],
[10, -46.75],
[12, -17.42],
[14, -90.4],
[16, -82.44],
[17, -41.09],
[18, -76.65],
],
},
{
symbol: 'ABB',
name: 'ABB Ltd Common Stock',
volume: '$901,811',
change: [
[1, 96.6],
[3, -76],
[7, 13.81],
[8, -76.99],
[10, 81.91],
[13, -96.12],
[16, -12.15],
[18, -60.36],
[19, 30.58],
],
},
{
symbol: 'ABBV',
name: 'AbbVie Inc. Common Stock',
volume: '$5,364,090',
change: [
[2, 74.34],
[4, 65.46],
[8, 9.11],
[9, 35.96],
[11, 4.43],
[15, 69.03],
[16, 14.04],
[17, 1.98],
[19, 62.13],
],
},
{
symbol: 'ABC',
name: 'AmerisourceBergen Corporation Common Stock',
volume: '$549,618',
change: [
[1, 50.73],
[7, 88.25],
[8, 70.3],
[10, 86.63],
[13, 38.29],
[14, 48.42],
[15, 42.99],
[16, 21.94],
[17, 97.49],
],
},
{
symbol: 'ABEV',
name: 'Ambev S.A. American Depositary Shares',
volume: '$27,226,664',
change: [
[0, -22.48],
[2, -54.87],
[3, -76.5],
[4, -79.68],
[5, -34.04],
[6, -92.44],
[7, -45.51],
[8, -76.13],
[10, -3.33],
],
},
{
symbol: 'ABMD',
name: 'ABIOMED Inc. Common Stock',
volume: '$137,763',
change: [
[0, -83.29],
[2, 52.28],
[3, 61.05],
[5, 14.37],
[5, 48.23],
[6, 17.6],
[9, 34.12],
[11, 7.74],
[12, 60.32],
],
},
{
symbol: 'ABNB',
name: 'Airbnb Inc. Class A Common Stock',
volume: '$4,456,806',
change: [
[3, 82.41],
[5, 8.96],
[7, 37.67],
[8, 68.04],
[9, 18.43],
[10, 41.35],
[12, 44.72],
[13, 52.99],
[14, 96.18],
],
},
];
}
import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
enableProdMode();
}
const app = bootstrapApplication(AppComponent, {
providers: [provideHttpClient()],
});
Time Axis Copy Link
The Time Axis is similar to the Number Axis in that it is also used to plot continuous values. X values can be number or Date objects, where number values are interpreted as timestamps derived from Unix time.
The Time Axis is configured through the Chart Time Axis Options as follows:
<ag-grid-angular
[columnDefs]="columnDefs"
/* other grid options ... */ />
this.columnDefs = [
{
field: 'rateOfChange',
cellRenderer: 'agSparklineCellRenderer',
cellRendererParams: {
sparklineOptions: {
axis: {
// use Time Axis
type: 'time'
}
}
},
},
// other column definitions ...
];In the snippet above, the axis type is set to 'time' to select a Time Axis instead of the default Category Axis.
The example below demonstrates the Time Axis used in an Area Sparkline. Note the following:
- The Rate Of Change column is mapped to data containing an Array of Tuples of type
[Date, number][]. - The
DateX values are placed in chronological order and spread along the axis based on the time between data points. - The
DateX values are included in the tooltip.
import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
AgChartsCommunityModule,
AgSparklineOptions,
} from "ag-charts-community";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ClipboardModule,
ContextMenuModule,
SparklinesModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
SparklinesModule.with(AgChartsCommunityModule),
ClipboardModule,
ContextMenuModule,
]);
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowData]="rowData"
[rowHeight]="rowHeight"
/> `,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "symbol", maxWidth: 110 },
{ field: "name", minWidth: 250 },
{
field: "change",
cellRenderer: "agSparklineCellRenderer",
cellRendererParams: {
sparklineOptions: {
type: "area",
axis: {
// set axis type to 'time'
type: "time",
},
marker: {
enabled: true,
size: 3,
},
} as AgSparklineOptions,
},
},
{ field: "volume", maxWidth: 140 },
];
defaultColDef: ColDef = {
flex: 1,
minWidth: 100,
};
rowData: any[] | null = getData();
rowHeight = 50;
}
export function getData(): any[] {
return [
{
symbol: 'A',
name: 'Agilent Technologies Inc. Common Stock',
volume: '$971,760',
change: [
[new Date(1976, 6, 4, 12, 30, 0, 0), -37.3],
[new Date(1977, 6, 4, 12, 30, 0, 0), 16.92],
[new Date(1978, 6, 4, 12, 30, 0, 0), -19.8],
[new Date(1979, 6, 4, 12, 30, 0, 0), -62.8],
[new Date(1982, 6, 4, 12, 30, 0, 0), -8.53],
[new Date(1983, 6, 4, 12, 30, 0, 0), -38.4],
[new Date(1984, 6, 4, 12, 30, 0, 0), -93.9],
[new Date(1985, 6, 4, 12, 30, 0, 0), -26.1],
],
},
{
symbol: 'AAL',
name: 'American Airlines Group Inc. Common Stock',
volume: '$20,309,670',
change: [
[new Date(1976, 6, 4, 12, 30, 0, 0), 33.93],
[new Date(1979, 6, 4, 12, 30, 0, 0), -89.4],
[new Date(1980, 6, 4, 12, 30, 0, 0), -8.98],
[new Date(1981, 6, 4, 12, 30, 0, 0), 34.8],
[new Date(1982, 6, 4, 12, 30, 0, 0), -55.9],
[new Date(1983, 6, 4, 12, 30, 0, 0), -31.9],
[new Date(1984, 6, 4, 12, 30, 0, 0), 84.37],
[new Date(1985, 6, 4, 12, 30, 0, 0), 3.23],
],
},
{
symbol: 'AAP',
name: 'Advance Auto Parts Inc Advance Auto Parts Inc W/I',
volume: '$699,427',
change: [
[new Date(1976, 6, 4, 12, 30, 0, 0), -86.2],
[new Date(1977, 6, 4, 12, 30, 0, 0), -14.9],
[new Date(1978, 6, 4, 12, 30, 0, 0), -67.8],
[new Date(1979, 6, 4, 12, 30, 0, 0), -41.2],
[new Date(1980, 6, 4, 12, 30, 0, 0), 79.57],
[new Date(1983, 6, 4, 12, 30, 0, 0), 44.47],
[new Date(1984, 6, 4, 12, 30, 0, 0), 92.09],
[new Date(1985, 6, 4, 12, 30, 0, 0), 62.25],
],
},
{
symbol: 'AAPL',
name: 'Apple Inc. Common Stock',
volume: '$57,807,909',
change: [
[new Date(1976, 6, 4, 12, 30, 0, 0), -40.6],
[new Date(1977, 6, 4, 12, 30, 0, 0), -48.07],
[new Date(1978, 6, 4, 12, 30, 0, 0), -35.32],
[new Date(1979, 6, 4, 12, 30, 0, 0), -92.55],
[new Date(1980, 6, 4, 12, 30, 0, 0), -84.49],
[new Date(1981, 6, 4, 12, 30, 0, 0), -67.75],
[new Date(1985, 6, 4, 12, 30, 0, 0), -91.68],
[new Date(1986, 6, 4, 12, 30, 0, 0), -38.42],
],
},
{
symbol: 'ABB',
name: 'ABB Ltd Common Stock',
volume: '$901,811',
change: [
[new Date(1976, 6, 4, 12, 30, 0, 0), 27.92],
[new Date(1977, 6, 4, 12, 30, 0, 0), 78.59],
[new Date(1978, 6, 4, 12, 30, 0, 0), -85.38],
[new Date(1979, 6, 4, 12, 30, 0, 0), 96.6],
[new Date(1983, 6, 4, 12, 30, 0, 0), 13.81],
[new Date(1984, 6, 4, 12, 30, 0, 0), -76.99],
[new Date(1985, 6, 4, 12, 30, 0, 0), 89.68],
],
},
{
symbol: 'ABBV',
name: 'AbbVie Inc. Common Stock',
volume: '$5,364,090',
change: [
[new Date(1976, 6, 4, 12, 30, 0, 0), 84.02],
[new Date(1977, 6, 4, 12, 30, 0, 0), 74.34],
[new Date(1981, 6, 4, 12, 30, 0, 0), 4.78],
[new Date(1982, 6, 4, 12, 30, 0, 0), 30.44],
[new Date(1983, 6, 4, 12, 30, 0, 0), 9.11],
[new Date(1984, 6, 4, 12, 30, 0, 0), 35.96],
[new Date(1985, 6, 4, 12, 30, 0, 0), 4.43],
],
},
{
symbol: 'ABC',
name: 'AmerisourceBergen Corporation Common Stock',
volume: '$549,618',
change: [
[new Date(1976, 6, 4, 12, 30, 0, 0), 50.73],
[new Date(1977, 6, 4, 12, 30, 0, 0), 24.81],
[new Date(1978, 6, 4, 12, 30, 0, 0), -84],
[new Date(1979, 6, 4, 12, 30, 0, 0), 19.03],
[new Date(1981, 6, 4, 12, 30, 0, 0), 88.25],
[new Date(1982, 6, 4, 12, 30, 0, 0), 70.3],
[new Date(1983, 6, 4, 12, 30, 0, 0), 86.63],
[new Date(1984, 6, 4, 12, 30, 0, 0), 83.77],
[new Date(1985, 6, 4, 12, 30, 0, 0), 21.81],
],
},
{
symbol: 'ABEV',
name: 'Ambev S.A. American Depositary Shares (Each representing 1 Common Share)',
volume: '$27,226,664',
change: [
[new Date(1976, 6, 4, 12, 30, 0, 0), -22.48],
[new Date(1977, 6, 4, 12, 30, 0, 0), -54.87],
[new Date(1978, 6, 4, 12, 30, 0, 0), -76.5],
[new Date(1983, 6, 4, 12, 30, 0, 0), -92.44],
[new Date(1984, 6, 4, 12, 30, 0, 0), -45.51],
[new Date(1985, 6, 4, 12, 30, 0, 0), -76.13],
],
},
{
symbol: 'ABMD',
name: 'ABIOMED Inc. Common Stock',
volume: '$137,763',
change: [
[new Date(1976, 6, 4, 12, 30, 0, 0), -83.29],
[new Date(1977, 6, 4, 12, 30, 0, 0), 52.28],
[new Date(1978, 6, 4, 12, 30, 0, 0), 61.05],
[new Date(1981, 6, 4, 12, 30, 0, 0), 19.6],
[new Date(1982, 6, 4, 12, 30, 0, 0), 34.12],
[new Date(1983, 6, 4, 12, 30, 0, 0), 7.74],
[new Date(1984, 6, 4, 12, 30, 0, 0), 60.32],
[new Date(1985, 6, 4, 12, 30, 0, 0), -28.43],
],
},
{
symbol: 'ABNB',
name: 'Airbnb Inc. Class A Common Stock',
volume: '$4,456,806',
change: [
[new Date(1976, 6, 4, 12, 30, 0, 0), 19.76],
[new Date(1977, 6, 4, 12, 30, 0, 0), 82.41],
[new Date(1978, 6, 4, 12, 30, 0, 0), 29.97],
[new Date(1979, 6, 4, 12, 30, 0, 0), 92.73],
[new Date(1980, 6, 4, 12, 30, 0, 0), 75.48],
[new Date(1981, 6, 4, 12, 30, 0, 0), 86.8],
[new Date(1982, 6, 4, 12, 30, 0, 0), 8.96],
[new Date(1985, 6, 4, 12, 30, 0, 0), 18.43],
],
},
];
}
import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
enableProdMode();
}
const app = bootstrapApplication(AppComponent, {
providers: [provideHttpClient()],
});