import { Sparkline } from "@elabs-ai/components-charts";npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-chartsPrompt for your coding agent
Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui Sparkline chart (from @elabs-ai/components-charts) to this project. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Look Sparkline up before writing code: `npx -y @elabs-ai/components-cli docs Sparkline` prints its real props, variants, what it pairs with and what to avoid. 3. If @elabs-ai/components-charts is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 4. Use it here: [the screen or file, and what it should show] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
Avoid
- Adding axes and tooltips to a Sparkline — if it needs them it is a LineChart.
- A Sparkline as the only carrier of a number — pair it with the value (MetricCard).
- Fixing its width in pixels — let the tile or cell own the box so it reflows.
Works with
Used inside
Examples
Line
In Text
Empty
With Target
With Baseline
With Band
All References
Bar With Target
Fill container (fit="fill")
`fit="fill"` measures its own CSS box (here a 288px-wide container) and draws the plot at that real pixel width instead of stretching a mismatched viewBox to fit — no distorted strokes, dot or last-value label. Compare to `Default`, which stays at its fixed `width`/`height` no matter the box.
Hover + keyboard readout
Hover or tab to the plot to open the value readout — a small floating box naming the point plus every reference set below it. `pointLabels` names each point in the readout's header ("Week 31") instead of the default "4 of 8"; every other word (`Value`/`baseline`/`target`/`normal range`) is the same `labels` seam the accessible name already uses.
interactive={false}
`interactive={false}` restores today's inert SVG byte-for-byte — no tab stop, no hover mark, no readout. Reach for it wherever a Sparkline sits inside a link or button (a focusable `<svg>` nested in one would be a second, competing tab stop) or is pure decoration.
API
Sparkline
| Prop | Type | Description |
|---|---|---|
valuesrequired | number[] | The series, oldest → newest. |
variant | "bar" | "line" | Visual form. Default "bar". |
emphasizeLast | boolean | Emphasize the newest value with the `--chart-1` token. Default true for bars. |
interactive | boolean | Show a point's values on hover and keyboard focus (arrow keys step, Home/End jump, Escape hides). Default `true`. Set `false` for a Sparkline that sits inside a link or button (a focusable `<svg>` nested in one is a second, competing tab stop) or is pure decoration — an `aria-hidden` caller, an empty series and a host `interactions.passive: false` already disable it with no prop needed. |
label | string | @deprecated Use `accessibleLabel` — the same string (RM-191, ADR 0042 A.1). Still read until 7.0.0, with one development warning; when both are set, `accessibleLabel` wins. |
width | number | Rendered size when `fit="fixed"` (default) — the SVG's actual pixel geometry, unaffected by any CSS box the caller gives it. Also the FALLBACK size for `fit="fill"` before the first real measurement lands. |
height | number | |
fit | "fixed" | "fill" | Sizing strategy. `"fixed"` (default) draws at exactly `width`×`height` — unchanged no matter what CSS box (`className="w-full"`, a table cell, …) the caller puts it in, exactly as before this prop existed. `"fill"` measures the real rendered width of that CSS box (the charts' shared resize timing: at once, then at most every 100 ms while it changes; falling back to `width` before the first measurement or where `ResizeObserver` isn't available, e.g. jsdom) and draws the plot at that real pixel width instead — no CSS stretching, so line strokes, the emphasized dot and the last-value label never distort. Opt in per usage (a trend card, a scorecard cell) rather than globally, since most Sparkline call sites size it explicitly and shouldn't pay for a measurement round-trip. |
target | number | A horizontal reference line ("goal", "quota") drawn across the plot in `--chart-foreground-muted`, dashed — never recolours the series even when the latest value falls short; status is the card's job, not the sparkline's. The reference sits a rung BELOW the data it is read against (b-7): the series is promoted to `--chart-foreground` whenever any reference is drawn, so the measured thing is always the strongest mark on the plot. |
baseline | number[] | A comparison series (e.g. last year), same index alignment as `values`. Drawn as a thin `--chart-foreground-muted` line behind the main series, in both variants. |
band | readonly [number, number] | A "normal range" `[lo, hi]` drawn as a quiet filled zone behind everything. |
fitDomain | boolean | For `variant="line"` with no `target`/`baseline`/`band`: use the series' own min–max (padded) domain instead of the shared zero-based bar scale. A tight-range series (a weekly count moving ±5% around its own mean) reads as a flat line on a zero-based scale — decoration with no information (WCAG 1.4.1's "a channel that carries nothing" failure mode, not a colour one). Default false — byte-identical to today's shared scale when unset. |
showLastValue | boolean | Render the formatted latest value as text to the right of the plot. Default false. |
formatValue | (value: number) => string | Formats every value this component surfaces as text (the last-value label, the accessible name's numbers, and the hover/keyboard readout's rows). Default: host-locale compact notation for the visible text; the accessible name's numbers print unformatted (`String(value)`). |
lastValueSuffix | string | Appended (with a leading space) to the `showLastValue` text, to the accessible name's "latest …" phrase, and to the readout's series-value row — e.g. `"this wk"` when the plotted series is weekly but a nearby headline figure is a different period (a quarter total), so none of the three can be misread as the same fact at a different scale. Default: none (today's behaviour). |
messages | SparklineLabels & ChartMessages | Words for the reference facts in the default accessible name and the hover/keyboard readout (the `messages` group, RM-191). Sparkline prints no catalogue (`charts.*`) words of its own, so only these word-bag keys change what it says. |
labels | SparklineLabels | @deprecated Use `messages` — the same object, the same keys (RM-191, ADR 0042 A.1). Still read until 7.0.0, with one development warning; when both are set, `messages` wins. |
pointLabels | readonly string[] | Index-aligned with `values` (e.g. `["Week 31", "Week 32", …]`) — names each point in the hover/keyboard readout's header. Default header is `"{i+1} of {n}"`. |
accessibleLabel | string | Accessible name for the chart region. AT announces this when the container receives focus or is read in flow. Example: "Monthly revenue bar chart" |
accessibleDescription | string | Supplemental description (series names, value ranges, last values, etc.). Rendered as a visually-hidden `<span>` associated via `aria-describedby`. Example: "Series: Revenue, Expenses. Range: 0–25,000." |