---
title: "Sparklines - Line Customisation"
enterprise: true
framework: vue
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/vue-data-grid/sparklines-line-customisation/#line-options)
- [Marker Options](https://www.ag-grid.com/vue-data-grid/sparklines-line-customisation/#marker-options)
- [Sparkline Padding Options](https://www.ag-grid.com/vue-data-grid/sparklines-line-customisation/#sparkline-padding-options)
Also see [Additional Customisations](https://www.ag-grid.com/vue-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 {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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,
]);
const VueExample = defineComponent({
template: `
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef(null);
const columnDefs = ref([
{ 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 = ref({
flex: 1,
minWidth: 100,
});
const rowData = ref(getData());
const rowHeight = ref(50);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
};
return {
gridApi,
columnDefs,
defaultColDef,
rowData,
rowHeight,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
```
[Live example: Line Sparkline Customisation](https://www.ag-grid.com/examples/sparklines-line-customisation/line-sparkline-customisation/vue3)
## 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.
Default
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.
Default
Custom marker
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.
Default padding
Custom padding
## Additional Customisations
More advanced customisations are discussed separately in the following sections:
- [Axis](https://www.ag-grid.com/vue-data-grid/sparklines-axis-types/) - configure the axis type via `axis` options.
- [Tooltips](https://www.ag-grid.com/vue-data-grid/sparklines-tooltips/) - configure tooltips using `tooltip` options.
- [Points of Interest](https://www.ag-grid.com/vue-data-grid/sparklines-points-of-interest/) - configure individual points of interest using an `itemStyler`.