Sparkline
Show a compact trend beside a value.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- A compact trend inside a card, table row, or KPI tile.
- Small charts people can scrub by pointer or keyboard to read past values.
- Use bar-chart for comparing discrete periods with axes.
- Use stat-card or metric-card when only the latest value matters.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { Sparkline } from 'animui/sparkline';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { Sparkline } from "animui/sparkline"; export function Signups() { return ( <Sparkline label="Signups" data={[12, 18, 15, 22, 30, 27, 34]} labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]} value="34" change="+26%" tone="success" /> );}Sparkline
A small line chart with a headline value that can be scrubbed by pointer or keyboard.
PropTypeDefaultDescription
dataRequirednumber[]–Points in order, oldest first.labelRequiredstring–What is measured. Names the chart.valuestring–Headline value at rest. While scrubbing it shows the point under the cursor.changestring–Aside text at rest, such as "+4.1%".tone"accent" | "success" | "warning" | "danger""accent"Line and change color.widthnumber160Drawing width in SVG units.heightnumber52Drawing height in SVG units.labelsstring[]–One label per point, such as a date, shown while scrubbing.formatValue(value: number, index: number) => string–Formats a scrubbed point. Defaults to a grouped number.areabooleantrueQuiet fill under the line.interactivebooleantrueEnables pointer and keyboard scrubbing.- ArrowLeftorArrowRight
- Moves the cursor one point back or forward (ArrowDown and ArrowUp too).
- PageDownorPageUp
- Moves about a sixth of the series.
- HomeorEnd
- Jumps to the first or last point.
- Escape
- Stops scrubbing and returns to the latest value.
- The figure has an aria-label describing the series; the SVG is hidden.
- When interactive, the plot is a focusable role="slider" whose aria-valuetext reads the point label and value.
- Pass labels so scrubbed points read as dates rather than positions.
- The line draws in on first view and the end dot appears as it lands.
- While scrubbing, the cursor springs between points, later points dim, and headline copy rolls.
- Reduced motion shows the full line at once and moves the cursor without springing.
- The plot measures its width with a ResizeObserver and redraws to fill its container.
- Scrubbing uses touch-action pan-y, so a horizontal drag scrubs while vertical swipes still scroll the page.
- On touch the readout returns to the latest value when the finger lifts.
- Each chart has its own ResizeObservers and an in-view draw; set interactive to false in dense tables to drop tab stops and handlers.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for a compact trend inside a card or table row. Use bar-chart for comparing discrete periods with axes.
- Pass value as the formatted latest reading; formatValue should match it so scrubbed values look consistent.
- Set interactive to false in dense tables to avoid many tab stops.
The full library index for assistants is at /llms.txt.