--- title: "Sparklines - Axis Types" enterprise: true framework: javascript version: "36.1.0" --- # Sparklines - Axis Types 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](https://www.ag-grid.com/javascript-data-grid/sparklines-axis-types/#category-axis) - data points are evenly spread along the axis. - [Number Axis](https://www.ag-grid.com/javascript-data-grid/sparklines-axis-types/#number-axis) - data is spaced based on the magnitude of the X values. - [Time Axis](https://www.ag-grid.com/javascript-data-grid/sparklines-axis-types/#time-axis) - data is spaced according to the time between data points. > **Note** > > The Y values supplied in the sparkline data will always be plotted using the [Number Axis](https://www.ag-grid.com/javascript-data-grid/sparklines-axis-types/#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](https://www.ag-grid.com/_astro/time-axis.U6me9uU2.png) Time Axis ![Category axis](https://www.ag-grid.com/_astro/category-axis.hq5GGBQm.png) 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 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](https://www.ag-grid.com/charts/javascript/axes-types/#reference-AgCategoryAxisOptions) as follows: ```js const gridOptions = { columnDefs: [ { field: 'rateOfChange', cellRenderer: 'agSparklineCellRenderer', cellRendererParams: { sparklineOptions: { axis: { // use Category Axis (Optional) type: 'category' } } }, }, // other column definitions ... ], // other grid options ... } ``` 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](https://www.ag-grid.com/javascript-data-grid/sparklines-data/#array-of-tuples) of type `[string, number][]`. - The `string` X values are evenly spaced across the axis using a fixed width between each data point. - The `string` X values are included in the tooltip. #### Sparkline Category Axis ```ts import { AgChartsCommunityModule, AgSparklineOptions, } from "ag-charts-community"; import { ClientSideRowModelModule, GridApi, GridOptions, ModuleRegistry, createGrid, enableDevValidations, } from "ag-grid-community"; import { ClipboardModule, ContextMenuModule, SparklinesModule, } from "ag-grid-enterprise"; import { getData } from "./data"; // Enable extended validations only for development if (process.env.NODE_ENV !== "production") { enableDevValidations(); } ModuleRegistry.registerModules([ ClientSideRowModelModule, SparklinesModule.with(AgChartsCommunityModule), ClipboardModule, ContextMenuModule, ]); let gridApi: GridApi; const gridOptions: GridOptions = { columnDefs: [ { 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: { flex: 1, minWidth: 100, }, rowData: getData(), rowHeight: 50, }; const gridDiv = document.querySelector("#myGrid")!; gridApi = createGrid(gridDiv, gridOptions); ``` [Live example: Sparkline Category Axis](https://www.ag-grid.com/examples/sparklines-axis-types/sparkline-category-axis/typescript) ## Number Axis 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](https://www.ag-grid.com/charts/javascript/axes-types/#reference-AgNumberAxisOptions) as follows: ```js const gridOptions = { columnDefs: [ { field: 'history', cellRenderer: 'agSparklineCellRenderer', cellRendererParams: { sparklineOptions: { axis: { // use Number Axis type: 'number' } } }, }, // other column definitions ... ], // other grid options ... } ``` In the snippet above, the axis type is set to `'number'` to select a Number Axis instead of the default [Category Axis](https://www.ag-grid.com/javascript-data-grid/sparklines-axis-types/#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](https://www.ag-grid.com/javascript-data-grid/sparklines-data/#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. #### Sparkline Number Axis ```ts import { AgChartsCommunityModule, AgSparklineOptions, } from "ag-charts-community"; import { ClientSideRowModelModule, GridApi, GridOptions, ModuleRegistry, createGrid, enableDevValidations, } from "ag-grid-community"; import { ClipboardModule, ContextMenuModule, SparklinesModule, } from "ag-grid-enterprise"; import { getData } from "./data"; // Enable extended validations only for development if (process.env.NODE_ENV !== "production") { enableDevValidations(); } ModuleRegistry.registerModules([ ClientSideRowModelModule, SparklinesModule.with(AgChartsCommunityModule), ClipboardModule, ContextMenuModule, ]); let gridApi: GridApi; const gridOptions: GridOptions = { columnDefs: [ { 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: { flex: 1, minWidth: 100, }, rowData: getData(), rowHeight: 50, }; const gridDiv = document.querySelector("#myGrid")!; gridApi = createGrid(gridDiv, gridOptions); ``` [Live example: Sparkline Number Axis](https://www.ag-grid.com/examples/sparklines-axis-types/sparkline-number-axis/typescript) ## Time Axis The Time Axis is similar to the [Number Axis](https://www.ag-grid.com/javascript-data-grid/sparklines-axis-types/#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](https://www.ag-grid.com/charts/javascript/axes-types/#reference-AgTimeAxisOptions) as follows: ```js const gridOptions = { columnDefs: [ { field: 'rateOfChange', cellRenderer: 'agSparklineCellRenderer', cellRendererParams: { sparklineOptions: { axis: { // use Time Axis type: 'time' } } }, }, // other column definitions ... ], // other grid options ... } ``` In the snippet above, the axis type is set to `'time'` to select a Time Axis instead of the default [Category Axis](https://www.ag-grid.com/javascript-data-grid/sparklines-axis-types/#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](https://www.ag-grid.com/javascript-data-grid/sparklines-data/#array-of-tuples) of type `[Date, number][]`. - The `Date` X values are placed in chronological order and spread along the axis based on the time between data points. - The `Date` X values are included in the tooltip. #### Sparkline Time Axis ```ts import { AgChartsCommunityModule, AgSparklineOptions, } from "ag-charts-community"; import { ClientSideRowModelModule, GridApi, GridOptions, ModuleRegistry, createGrid, enableDevValidations, } from "ag-grid-community"; import { ClipboardModule, ContextMenuModule, SparklinesModule, } from "ag-grid-enterprise"; import { getData } from "./data"; // Enable extended validations only for development if (process.env.NODE_ENV !== "production") { enableDevValidations(); } ModuleRegistry.registerModules([ ClientSideRowModelModule, SparklinesModule.with(AgChartsCommunityModule), ClipboardModule, ContextMenuModule, ]); let gridApi: GridApi; const gridOptions: GridOptions = { columnDefs: [ { 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: { flex: 1, minWidth: 100, }, rowData: getData(), rowHeight: 50, }; const gridDiv = document.querySelector("#myGrid")!; gridApi = createGrid(gridDiv, gridOptions); ``` [Live example: Sparkline Time Axis](https://www.ag-grid.com/examples/sparklines-axis-types/sparkline-time-axis/typescript)