---
product: "AG Grid"
title: "Sparklines - API"
description: "All sparkline types and interfaces are available from the ag-charts-community or ag-charts-enterprise packages."
enterprise: true
framework: vue
version: "36.2.0"
related:
    - title: "Install Sparklines"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/sparklines-installation/"
    - title: "Overview"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/sparklines-overview/"
    - title: "Sparkline Data"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/sparklines-data/"
    - title: "Axis Types"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/sparklines-axis-types/"
    - title: "Tooltips"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/sparklines-tooltips/"
    - title: "Points of Interest"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/sparklines-points-of-interest/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# 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/archive/36.2.0/vue-data-grid/sparklines-api-sparkline-area/)
- [Bar / Column Sparkline Options](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/sparklines-api-sparkline-bar/)
- [Line Sparkline Options](https://www.ag-grid.com/archive/36.2.0/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/archive/36.2.0/vue-data-grid/sparklines-api-sparkline-bar/#item-styler-params) | [Result](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/sparklines-api-sparkline-bar/#series-style)
- Line Item Styler: [Params](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/sparklines-api-sparkline-line/#item-styler-params) | [Result](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/sparklines-api-sparkline-line/#series-style)
- Area Item Styler: [Params](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/sparklines-api-sparkline-area/#item-styler-params) | [Result](https://www.ag-grid.com/archive/36.2.0/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.