---
title: "Sparklines - Line Customisation"
enterprise: true
framework: react
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/react-data-grid/sparklines-line-customisation/#line-options)
- [Marker Options](https://www.ag-grid.com/react-data-grid/sparklines-line-customisation/#marker-options)
- [Sparkline Padding Options](https://www.ag-grid.com/react-data-grid/sparklines-line-customisation/#sparkline-padding-options)

Also see [Additional Customisations](https://www.ag-grid.com/react-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

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  useEffect,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  AgChartsCommunityModule,
  AgSparklineOptions,
} from "ag-charts-community";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  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();
}

const modules = [
  ClientSideRowModelModule,
  SparklinesModule.with(AgChartsCommunityModule),
  ClipboardModule,
  ContextMenuModule,
];

const GridExample = () => {
  const gridRef = useRef<AgGridReact>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>(getData());
  const [columnDefs, setColumnDefs] = useState<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,
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 100,
    };
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact
            ref={gridRef}
            rowData={rowData}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            rowHeight={50}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

## 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/react-data-grid/sparklines-axis-types/) - configure the axis type via `axis` options.
- [Tooltips](https://www.ag-grid.com/react-data-grid/sparklines-tooltips/) - configure tooltips using `tooltip` options.
- [Points of Interest](https://www.ag-grid.com/react-data-grid/sparklines-points-of-interest/) - configure individual points of interest using an `itemStyler`.