--- title: "Sparklines - Area Customisation" enterprise: true framework: javascript version: "36.1.0" --- # Sparklines - Area Customisation This section shows how Area Sparklines can be customised by overriding the default area options. The following can be used to customise Area Sparklines: - [Area Line Options](https://www.ag-grid.com/javascript-data-grid/sparklines-area-customisation/#area-line-options) - [Marker Options](https://www.ag-grid.com/javascript-data-grid/sparklines-area-customisation/#marker-options) - [Area Fill Options](https://www.ag-grid.com/javascript-data-grid/sparklines-area-customisation/#area-fill-options) - [Axis Line Options](https://www.ag-grid.com/javascript-data-grid/sparklines-area-customisation/#axis-line-options) - [Sparkline Padding Options](https://www.ag-grid.com/javascript-data-grid/sparklines-area-customisation/#sparkline-padding-options) Also see [Additional Customisations](https://www.ag-grid.com/javascript-data-grid/sparklines-area-customisation/#additional-customisations) for more advanced customisations that are common across all sparklines. The snippet below shows option overrides for the Area Sparkline: ```js sparklineOptions: { type: 'area', fill: 'rgba(216, 204, 235, 0.3)', stroke: 'rgb(119,77,185)', marker: { enabled: true, size: 0, itemStyler: (params: any) => { if (params.highlightState === 'highlighted-item') { return { size: 7 }; } } }, highlight: { highlightedItem: { fill: 'rgb(143,185,77)', strokeWidth: 0, }, }, axis: { type: 'category', stroke: 'rgb(204, 204, 235)' } } ``` The following example demonstrates the results of the Area Sparkline options above: #### Area Sparkline Customisation ```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: 120 }, { field: "name", minWidth: 250 }, { field: "change", cellRenderer: "agSparklineCellRenderer", cellRendererParams: { sparklineOptions: { type: "area", fill: "rgba(216, 204, 235, 0.3)", stroke: "rgb(119,77,185)", marker: { enabled: true, size: 0, itemStyler: (params: any) => { if (params.highlightState === "highlighted-item") { return { size: 7, }; } }, }, highlight: { highlightedItem: { fill: "rgb(143,185,77)", strokeWidth: 0, }, }, axis: { type: "category", stroke: "rgb(204, 204, 235)", }, } 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: Area Sparkline Customisation](https://www.ag-grid.com/examples/sparklines-area-customisation/area-sparkline-customisation/typescript) ## Area Line Options To apply custom `stroke` and `strokeWidth` attributes to the line, set these properties under `line` options as shown: ```js sparklineOptions: { type: 'area', // Customise the area line path in the area sparkline. stroke: 'orange', strokeWidth: 2 } ``` The result of the above configuration is displayed here. ![Line default](https://www.ag-grid.com/_astro/default.BvNrD5CQ.png) Default ![Line customisation](https://www.ag-grid.com/_astro/custom-line.BJUCIeKP.png) Custom line ## Marker Options The markers are enabled by default but the size has been set to `0`px, making them invisible. The `size` property in the `marker.itemStyler` is `10`px, allowing the markers to become visible when in the highlighted state. These formats can be modified to your liking by setting the `marker.itemStyler` and `highlight` options as demonstrated below. ```js sparklineOptions: { type: 'area', marker: { enabled: true, size: 3, shape: 'circle', // Optional - marker shape is 'circle' by default. fill: 'green', stroke: 'green', strokeWidth: 2, itemStyler: (params) => { if (params.highlightState === 'highlighted-item') { return { size: 10 } } } }, highlight: { highlightedItem: { fill: 'cyan', stroke: 'cyan', } }, } ``` - In the snippet above, we have configured the marker size to be `3`px in the un-highlighted normal state, and `10`px in the highlighted state. - Note that the fill and stroke are also different depending on the highlighted state of the marker. Here is the result of the configuration shown in the above snippet. ![Marker default](https://www.ag-grid.com/_astro/default.BvNrD5CQ.png) Default ![Marker customisation](https://www.ag-grid.com/_astro/custom-marker.Cd7eZUw5.png) Custom marker ![Marker customisation for highlighted state](https://www.ag-grid.com/_astro/custom-highlighted-marker.0TVcjxlt.png) Custom highlighted marker See AG Charts [Series Markers](https://www.ag-grid.com/charts/javascript/markers/) for more information on marker options. See AG Charts [Stylers](https://www.ag-grid.com/charts/javascript/stylers/) for more information on item stylers. ## Area Fill Options To change the color of the area between the data points and the axis line, add the `fill` property to `sparklineOptions` as shown in the code snippet below. ```js sparklineOptions: { type: 'area', fill: 'lavender', // sets the colour between the area line and axis } ``` Here is the result of the configuration shown in the above snippet: ![Area fill default](https://www.ag-grid.com/_astro/default.BvNrD5CQ.png) Default ![Area fill customisation](https://www.ag-grid.com/_astro/custom-fill.DTyzofOP.png) Custom fill The given `fill` string can be in one of the following formats: - `#rgb` - Short Hex Code - `#rrggbb` - Hex Code - `rgb(r, g, b)` - RGB - `rgba(r, g, b, a)` - RGB with an alpha channel - CSS color keyword - such as `aqua`, `orange`, etc. ## Axis Line Options By default, an axis line is displayed. This setting can be modified using the `axis` options. See the code snippet below showing how to customise the axis line color and thickness. ```js sparklineOptions: { type: 'area', axis: { stroke: 'coral', // sets the axis line stroke strokeWidth: 3, // sets the axis line strokeWidth } } ``` Here is the result of the configuration shown in the above snippet: ![Axis line default](https://www.ag-grid.com/_astro/default.BvNrD5CQ.png) Default axis line ![Axis line customisation](https://www.ag-grid.com/_astro/custom-axis.DsppUk0E.png) Custom axis line > **Note** > > It is possible to remove the axis line entirely by setting the axis `strokeWidth` to `0`. ## Sparkline Padding Options To add extra space around the sparklines, custom `padding` options can be applied as shown in the code snippet below. ```js sparklineOptions: { type: 'area', // sets the padding around the sparkline padding: { top: 10, right: 5, bottom: 10, left: 5 }, } ``` Note that the `top`, `right`, `bottom` and `left` properties are all optional and can be modified independently. Here is the result of the configuration shown in the above snippet: ![Padding default](https://www.ag-grid.com/_astro/default-padding.Zp4S8Esy.png) Default padding ![Padding customisation](https://www.ag-grid.com/_astro/custom-padding.C364A3qm.png) Custom padding ## Additional Customisations More advanced customisations are discussed separately in the following sections: - [Axis](https://www.ag-grid.com/javascript-data-grid/sparklines-axis-types/) - configure the axis type via `axis` options. - [Tooltips](https://www.ag-grid.com/javascript-data-grid/sparklines-tooltips/) - configure tooltips using `tooltip` options. - [Points of Interest](https://www.ag-grid.com/javascript-data-grid/sparklines-points-of-interest/) - configure individual points of interest using a `itemStyler`.