# Sparkline

> A tiny trend line that draws itself in.

Component · Free · https://lodeui.com/components/sparkline

## When to use

- A tiny trend next to a number in a table or KPI card.

## When not to use

- When people need to read values: use an area or line chart.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/sparkline.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Sparkline } from "@/components/ui/sparkline";

export function Trend() {
  return <Sparkline data={[3, 5, 4, 7, 9]} width={96} height={28} />;
}
```

## API reference

### Sparkline

An SVG line with optional area fill.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `number[]` | – | Values in order. |
| width / height | `number` | `96 / 28` | Size in px. |
| color | `string` | – | Defaults to green when the line ends higher than it starts, red otherwise. |
| area | `boolean` | `true` | Gradient fill. |

## Accessibility

- Decorative (aria-hidden): put the value and change in text next to it.

## Motion

- The line draws in on mount (900ms).

## Responsive behavior

- Fixed size.

## Performance

- One path; cheap enough for hundreds per page.

## Notes for AI

- Use color='var(--destructive)' for metrics where up is bad.

## Related

- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.
- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.
- [Line chart](https://lodeui.com/components/line-chart) — Multi-series lines with legend toggles, crosshair and shared tooltip.