---
title: "Sparklines - API"
enterprise: true
framework: vue
version: "36.1.0"
---

# Sparklines - API

## Sparkline Options

All sparkline types and interfaces are available from the `ag-charts-community` or `ag-charts-enterprise` packages.

```ts
import { AgSparklineOptions, ... } from 'ag-charts-community'; // or ag-charts-enterprise
```

Per-type options for sparklines are available

- [Area Sparkline Options](https://www.ag-grid.com/vue-data-grid/sparklines-api-sparkline-area/)
- [Bar / Column Sparkline Options](https://www.ag-grid.com/vue-data-grid/sparklines-api-sparkline-bar/)
- [Line Sparkline Options](https://www.ag-grid.com/vue-data-grid/sparklines-api-sparkline-line/)

## Sparkline Item Styler

Depending on series type, item stylers are either present on the main options object, or as a property of the markers object.

The signature is generally the same for all series types

```ts
function itemStyler(params: AgAreaSeriesMarkerItemStylerParams ): AgSeriesMarkerStyle {
    const { yValue } = params;
    return {
        fill: yValue > 0 ? 'green' : 'red'
    };
}
```

- Bar / Column Item Styler: [Params](https://www.ag-grid.com/vue-data-grid/sparklines-api-sparkline-bar/#item-styler-params) | [Result](https://www.ag-grid.com/vue-data-grid/sparklines-api-sparkline-bar/#series-style)
- Line Item Styler: [Params](https://www.ag-grid.com/vue-data-grid/sparklines-api-sparkline-line/#item-styler-params) | [Result](https://www.ag-grid.com/vue-data-grid/sparklines-api-sparkline-line/#series-style)
- Area Item Styler: [Params](https://www.ag-grid.com/vue-data-grid/sparklines-api-sparkline-area/#item-styler-params) | [Result](https://www.ag-grid.com/vue-data-grid/sparklines-api-sparkline-area/#series-style)

See AG Charts

- [Series Markers](https://www.ag-grid.com/charts/javascript/markers/) for more information on marker options.
- [Stylers](https://www.ag-grid.com/charts/javascript/stylers/) for more information on item stylers.

## Sparkline Tooltip Renderer

The tooltip renderer is a function that can be provided to the sparkline options' tooltip object. It is called with the series datum and should return a string to be displayed in the tooltip.

```ts
const sparklineOptions: AgSparklineOptions = {
    tooltip: {
        renderer: (params: AgSeriesTooltipRendererParams<any>): AgTooltipRendererResult => {
            return `Value: ${params.datum.value}`;
        }
    }
};
```

See AG Charts [Tooltips](https://www.ag-grid.com/charts/javascript/tooltips/) for more information on tooltip options.