---
title: "Sparklines - Line Customisation"
enterprise: true
framework: angular
version: "36.1.0"
---

# Sparklines - Line Customisation

This section shows how Line Sparklines can be customised by overriding the default line options.

The following can be used to customise Line Sparklines:

- [Line Options](https://www.ag-grid.com/angular-data-grid/sparklines-line-customisation/#line-options)
- [Marker Options](https://www.ag-grid.com/angular-data-grid/sparklines-line-customisation/#marker-options)
- [Sparkline Padding Options](https://www.ag-grid.com/angular-data-grid/sparklines-line-customisation/#sparkline-padding-options)

Also see [Additional Customisations](https://www.ag-grid.com/angular-data-grid/sparklines-line-customisation/#additional-customisations) for more advanced customisations that are common across all sparklines.

The snippet below shows option overrides for the Line Sparkline:

```js
sparklineOptions: {
    type: 'line',
    stroke: 'rgb(124, 255, 178)',
    strokeWidth: 2,
    padding: {
        top: 5,
        bottom: 5,
    },
    marker: {
        itemStyler: (params) => {
            if (params.highlightState === 'highlighted-item') {
                return {
                    size: 7
                }
            }
        }
    },
    highlight: {
        highlightedItem: {
            fill: 'rgb(124, 255, 178)',
            strokeWidth: 0
        }
    },
}
```

The following example demonstrates the results of the Line Sparkline options above:

#### Line Sparkline Customisation

```ts
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: 120 },
    { field: "name", minWidth: 250 },
    {
      field: "change",
      cellRenderer: "agSparklineCellRenderer",
      cellRendererParams: {
        sparklineOptions: {
          type: "line",
          stroke: "rgb(124, 255, 178)",
          strokeWidth: 2,
          marker: {
            enabled: true,
            size: 0,
            itemStyler: (params: any) => {
              if (params.highlightState === "highlighted-item") {
                return {
                  size: 7,
                };
              }
            },
          },
          highlight: {
            highlightedItem: {
              fill: "rgb(124, 255, 178)",
              strokeWidth: 0,
            },
          },
          padding: {
            top: 5,
            bottom: 5,
          },
        } as AgSparklineOptions,
      },
    },
    {
      field: "volume",
      maxWidth: 140,
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  rowData: any[] | null = getData();
  rowHeight = 50;
}
```

[Live example: Line Sparkline Customisation](https://www.ag-grid.com/examples/sparklines-line-customisation/line-sparkline-customisation/angular)

## Line Options

To apply custom `stroke` and `strokeWidth` attributes to the line, set these properties under `line` options as shown:

```js
sparklineOptions: {
    type: 'line',
    // Customise the line path in the sparkline.
    stroke: 'orange',
    strokeWidth: 2,
}
```

The result of the above configuration is displayed below on the right, compared with default `line` options on the left.

![Line customisation](https://www.ag-grid.com/_astro/default.DHYBPvrZ.png)

Default

![Line customisation for highlighted state](https://www.ag-grid.com/_astro/custom-line.CV1I4xyJ.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` option as demonstrated below.

```js
sparklineOptions: {
    type: 'line',
    marker: {
        enabled: true,
        size: 3,
        shape: 'diamond',
        fill: 'green',
        stroke: 'green',
        strokeWidth: 2,
        itemStyler: (params) => {
            if (params.highlightState === 'highlighted-item') {
                return {
                    size: 10
                }
            }
        }
    }
}
```

- 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.

The result of the above configuration is displayed below, compared with default `marker` options in the first sparkline.

![Marker customisation](https://www.ag-grid.com/_astro/default.DHYBPvrZ.png)

Default

![Marker customisation](https://www.ag-grid.com/_astro/custom-marker.CwQcZQrB.png)

Custom marker

![Marker customisation for highlighted state](https://www.ag-grid.com/_astro/custom-highlighted-marker.CaoaL5K_.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.

## Sparkline Padding Options

To add extra space around the sparklines, custom `padding` options can be applied in the following way.

```js
sparklineOptions: {
    type: 'line',
    // Adjust the padding around the sparklines.
    padding: {
        top: 10,
        right: 5,
        bottom: 10,
        left: 5
    },
}
```

- The `top`, `right`, `bottom` and `left` properties are all optional and can be modified independently.

![Padding customisation](https://www.ag-grid.com/_astro/default-padding.lgkSwNv4.png)

Default padding

![Padding customisation for highlighted state](https://www.ag-grid.com/_astro/custom-padding.C4qphIMq.png)

Custom padding

## Additional Customisations

More advanced customisations are discussed separately in the following sections:

- [Axis](https://www.ag-grid.com/angular-data-grid/sparklines-axis-types/) - configure the axis type via `axis` options.
- [Tooltips](https://www.ag-grid.com/angular-data-grid/sparklines-tooltips/) - configure tooltips using `tooltip` options.
- [Points of Interest](https://www.ag-grid.com/angular-data-grid/sparklines-points-of-interest/) - configure individual points of interest using an `itemStyler`.