# Sparkline

Small trend line with an end dot that draws itself in and tints up or down. New data reshapes the line smoothly, and it can follow your finger with a cursor so your app shows the value.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/sparkline
```

## Import

```tsx
import { Sparkline } from "@/components/ui/sparkline/sparkline";
```

## Variants

- `portfolio` — Portfolio: `npx @lumioui/cli add pro/sparkline-portfolio`
- `vitals` — Vitals: `npx @lumioui/cli add pro/sparkline-vitals`
- `watchlist` — Watchlist: `npx @lumioui/cli add pro/sparkline-watchlist`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `data` | `number[]` | Series values, oldest first. Two or more points. |
| `width?` | `number` | Fixed width in pt. Omit to fill the parent. |
| `height?` | `number` | Height in pt. Default 36. |
| `strokeWidth?` | `number` | Line weight. Default 2. |
| `tone?` | `"auto" | "positive" | "negative" | "primary" | "neutral"` | Colour logic. "auto" (default) — success when the last point is at or above the first (or the baseline), destructive when below. "positive" / "negative" force it; "primary" follows the accent; "neutral" is ink. |
| `color?` | `string` | Explicit stroke colour — overrides `tone`. |
| `fill?` | `boolean` | Soft area fill under the line. Default false. |
| `endDot?` | `boolean` | Dot on the latest point. Default true. |
| `baseline?` | `number` | Dashed reference line — previous close, a goal, a resting average. |
| `curve?` | `"smooth" | "linear"` | "smooth" (default) rounds through points; "linear" draws straight segments. |
| `animate?` | `boolean` | Draw the line on at mount and morph between datasets. Default true. |
| `scrubbable?` | `boolean` | Press and drag to read values — shows a cursor and dot. Default false. |
| `onScrub?` | `(index: number | null) => void` | Scrub callback — the data index under the finger, `null` on release. |
| `live?` | `boolean` | Live series — each new `data` is a tick: the line shifts left one step on spring.layout (instead of morphing) and the end dot sends one ring. Default false. |
| `accessibilityLabel?` | `string` | Screen-reader description. Default summarises the trend. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/sparkline