---
title: "Sparklines - Column Customisation"
enterprise: true
framework: vue
version: "36.1.0"
---
# Sparklines - Column Customisation
This section shows how Column Sparklines can be customised by overriding the default column options.
The following can be used to customise Column Sparklines:
- [Column Fill Options](https://www.ag-grid.com/vue-data-grid/sparklines-column-customisation/#column-fill-options)
- [Column Stroke Options](https://www.ag-grid.com/vue-data-grid/sparklines-column-customisation/#column-stroke-options)
- [Column Padding Options](https://www.ag-grid.com/vue-data-grid/sparklines-column-customisation/#column-padding-options)
- [Column Label Options](https://www.ag-grid.com/vue-data-grid/sparklines-column-customisation/#column-label-options)
- [Axis Line Options](https://www.ag-grid.com/vue-data-grid/sparklines-column-customisation/#axis-line-options)
- [Sparkline Padding Options](https://www.ag-grid.com/vue-data-grid/sparklines-column-customisation/#sparkline-padding-options)
Also see [Additional Customisations](https://www.ag-grid.com/vue-data-grid/sparklines-column-customisation/#additional-customisations) for more advanced customisations that are common across all sparklines.
The snippet below shows option overrides for the Column Sparkline:
```js
sparklineOptions: {
type: 'bar',
direction: 'vertical',
fill: '#91cc75',
stroke: '#91cc75',
highlight: {
highlightedItem: {
fill: 'orange'
}
},
axis: {
type: 'category',
paddingInner: 0.3,
paddingOuter: 0.1,
}
},
```
The following example demonstrates the results of the Column Sparkline options above:
#### Column 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: "bar",
direction: "vertical",
fill: "#91cc75",
stroke: "#91cc75",
highlight: {
highlightedItem: {
fill: "orange",
},
},
axis: {
type: "category",
paddingInner: 0.3,
paddingOuter: 0.1,
},
} 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: Column Sparkline Customisation](https://www.ag-grid.com/examples/sparklines-column-customisation/column-sparkline-customisation/vue3)
## Column Fill Options
To apply a custom color to the columns, set the `fill` property in `sparklineOptions` as shown:
```js
sparklineOptions: {
type: 'bar',
direction: 'vertical',
fill: '#91cc75', // sets the column fill
}
```
Default
Custom fill
It is possible to set the fill for the highlighted state of the column by adding `fill` in `highlight` options as follows:
```js
sparklineOptions: {
type: 'bar',
direction: 'vertical',
highlight: {
highlightedItem: {
fill: 'orange', // sets the highlighted column fill
}
}
}
```
Default highlighted fill
Custom highlighted 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.
## Column Stroke Options
By default, the `strokeWidth` of each column is `0`, so no outline is visible around the columns.
To add a stroke, modify the `strokeWidth` and `stroke` properties as shown below.
```js
sparklineOptions: {
type: 'bar',
direction: 'vertical',
stroke: '#ec7c7d', // sets the column stroke
strokeWidth: 2, // sets the column stroke width
highlight: {
highlightedItem: {
stroke: '#b5ec7c', // sets the highlighted column stroke
strokeWidth: 2, // sets the highlighted column stroke width
}
}
}
```
- In the snippet above, we have configured the column stroke to be `2`px in the un-highlighted state, and `2`px in the highlighted state.
- Note that the `stroke` property is also different depending on the highlighted state of the column.
Here is the result of the configuration shown in the above snippet.
Default
Custom stroke
Custom highlighted stroke
> **Note**
>
> If `strokeWidth` is set to a value greater than `1`, it is recommended to set the axis line `strokeWidth` to the same value in order to preserve the alignment of the columns with the axis line.
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.
## Column Padding Options
The spacing between columns is adjustable via the `paddingInner` property. This property takes values between 0 and 1 and is available for axis `type: 'category'` only.
It is a proportion of the “step”, which is the interval between the start of a band and the start of the next band.
Here's an example.
```js
sparklineOptions: {
type: 'bar',
direction: 'vertical',
axis: {
type: 'category',
paddingInner: 0.5, // sets the padding between columns.
}
}
```
Default
Custom paddingInner
The padding on the outer edges of the first and last columns can also be adjusted. As with `paddingInner`, this value can be between 0 and 1 and is available for axis `type: 'category'` only.
If the value of `paddingOuter` is increased, the axis line will stick out more at both ends of the sparkline.
Here's a snippet where the `paddingOuter` is set to `0`.
```js
sparklineOptions: {
type: 'bar',
direction: 'vertical',
axis: {
type: 'category',
paddingOuter: 0, // sets the padding on the outer edge of the first and last columns.
}
}
```
In this case there will be no gap on either end of the sparkline, i.e. between the axis line start and the first column and the axis line end and the last column. This is demonstrated below in the middle sparkline.
Default
No paddingOuter
Increased paddingOuter
## Column Label Options
To enable column labels, set the `enabled` property in `label` options as shown:
```js
sparklineOptions: {
type: 'bar',
direction: 'vertical',
label: {
enabled: true // show column labels
}
}
```
Default
Label enabled
#### Column Sparkline Labels
```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: "bar",
direction: "vertical",
fill: "#fac858",
padding: {
top: 10,
bottom: 10,
},
label: {
enabled: true,
color: "#999999",
placement: "outside-end",
fontSize: 7.5,
padding: 1,
},
axis: {
type: "category",
stroke: "#cccccc",
strokeWidth: 2,
},
highlight: {
highlightedItem: {
stroke: "#fac858",
},
},
} as AgSparklineOptions,
},
},
{
field: "volume",
maxWidth: 140,
},
]);
const defaultColDef = ref({
flex: 1,
minWidth: 100,
});
const rowData = ref(getData());
const rowHeight = ref(80);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
};
return {
gridApi,
columnDefs,
defaultColDef,
rowData,
rowHeight,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
```
[Live example: Column Sparkline Labels](https://www.ag-grid.com/examples/sparklines-column-customisation/column-sparkline-labels/vue3)
It is possible to change the text value displayed as the label of individual columns by adding a `formatter` callback function to `label` options as follows:
```js
sparklineOptions: {
type: 'bar',
direction: 'vertical',
label: {
enabled: true,
formatter: labelFormatter
}
}
function labelFormatter({ value }) {
return `${value}%`
}
```
Default
Custom label text
To customise the label text style, set the style attributes in `label` options as follows:
```js
sparklineOptions: {
type: 'bar',
direction: 'vertical',
label: {
enabled: true,
fontWeight: 'bold',
fontStyle: 'italic',
fontSize: 9,
fontFamily: 'Arial, Helvetica, sans-serif',
color: 'black',
}
}
```
Default
Custom label text styles
The position of the labels can be specified by setting the `placement` property in `label` options. By default, the labels are positioned at the end of the columns on the inside, i.e. `placement` is set to `insideEnd `. The snippet below shows how the positioning of the label can be modified:
```js
sparklineOptions: {
type: 'bar',
direction: 'vertical',
label: {
enabled: true,
placement: 'inside-center', // positions the labels in the center of the columns
}
}
```
Label `placement` options include `inside-center`, `inside-start`, `inside-end`, `outside-start` or `outside-end` from the [AG Charts Label Placement](https://www.ag-grid.com/charts/javascript/bar-series/#reference-AgBarSeriesOptions-label-placement) documentation. These are shown in the screenshots below.
inside-start
inside-center
inside-end
outside-end
> **Note**
>
> When configuring labels with placement: `outside-end` or `outside-start`, it is recommended to add some padding to the sparkline using the `padding` options in order to prevent the labels from being clipped.
## Axis Line Options
By default, an axis line is displayed which can be modified using the `axis` options.
Here is a snippet to demonstrate axis formatting.
```js
sparklineOptions: {
type: 'bar',
direction: 'vertical',
axis: {
stroke: '#7cecb3', // sets the axis line stroke
strokeWidth: 3, // sets the axis line strokeWidth
},
}
```
Default axis line
Custom axis line
> **Note**
>
> It's 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 in the following way.
```js
sparklineOptions: {
type: 'bar',
direction: 'vertical',
// sets 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`.