# Sparkline

> A trend in one line, with the current value marked.

- **Level**: atom · **Status**: stable · **Role**: content
- **Import**: `import { Sparkline } from "@rrios-forge/ui/atoms/sparkline";`
- **Source**: `packages/ui/src/atoms/sparkline`

A trend without axes, for a MetricCard or a table cell. The line wears the subtle content tone; only the current value — the last point — wears a series colour. `label` is required: it is the accessible name, read with the latest value. No tooltip, no draw-in animation (ADR-035). For axes and exact values use Chart.

## Use it for

- A trend in a tile or a row → `Sparkline` (in `MetricCard`'s `trend` slot)

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |

## Stories

- [Playground](/?path=/story/components-atoms-sparkline--playground) · frame: `/iframe.html?id=components-atoms-sparkline--playground&viewMode=story`
- [Sizes](/?path=/story/components-atoms-sparkline--sizes) · frame: `/iframe.html?id=components-atoms-sparkline--sizes&viewMode=story`
- [With gaps](/?path=/story/components-atoms-sparkline--with-gaps) · frame: `/iframe.html?id=components-atoms-sparkline--with-gaps&viewMode=story`
- [In a MetricCard](/?path=/story/components-atoms-sparkline--in-metric-card) · frame: `/iframe.html?id=components-atoms-sparkline--in-metric-card&viewMode=story`

## Decisions that name it

- ADR-036 — Data visualization: colour roles, a grammar, and three components on plain SVG

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).