Sparkline
Show a compact trend beside a metric or inside a table row.
import { Sparkline } from '@youj/react'
Installation & usage
npm i @youj/reactFor an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.
Use a sparkline to show the shape of recent values next to the number they lead to: requests per minute beside the current rate, a week of revenue in a KPI, a trend in each row of a list. It has no axes, no tooltip and no legend, so it says "rising" or "falling" and nothing more. When people need to read values off it, use a Chart. Inside a KPI card, pass it to Stat Card's chart slot.
import { Sparkline } from '@youj/react'
<Sparkline data={[12, 14, 13, 17, 16, 19, 22]} className="h-8 w-32" label="Signups this week, rising" />It stretches to its box, so give it a height (the default is h-8) and a width from its container. The stroke keeps its width at any size, and the curve is monotone: it passes through every point and never overshoots one, so a flat stretch stays flat.
Description
A requests-per-minute figure with its sparkline, and a button that generates new data.
A list of services, each with a trend line and no area wash.
Without label a sparkline is decorative and hidden from assistive technology, which is right when the number beside it already says what matters. area={false} drops the wash for tight rows, and color takes any CSS color, best one of the chart colors.
CPU sparklines for several regions, all on a 0 to 100 domain.
Each sparkline scales to its own range by default, which makes a flat line look as busy as a steep one. Give sparklines that sit side by side the same domain so their heights compare.
Code
sparkline-demo.tsx, the Demo story. The component itself comes from the package.
Reference
Propsdata, color, area… (6)
Props
| Prop | Type | |
|---|---|---|
dataRequired | readonly number[] | – |
color | stringAny CSS color. default 'var(--color-chart-1)' | 'var(--color-chart-1)' |
area | booleanA wash under the curve. default true | true |
dot | booleanA dot on the latest value. default true | true |
domain | [number, number]Fixes the value range (e.g. | – |
label | stringAccessible name, e.g. "Revenue, last 30 days, rising". Without it the sparkline is decorative. | – |
Other props pass through: extends ComponentProps<'div'>. | ||
MotionReveal, end dot lands, data change… · reduced motion
Motion
| Moment | Tokens | ||
|---|---|---|---|
| Revealthe curve and its wash wipe in from the start when 40% of it scrolls into view, once | duration.deliberateease.enter560ms · cubic-bezier(0.16, 1, 0.3, 1) | 560mscubic-bezier(0.16, 1, 0.3, 1) | |
| End dot landsscales in as the line reaches it, 70% of the way through the reveal | spring.settle0.45s, bounce 0.3 | 0.45s, bounce 0.3 | |
| Data changethe curve and wash morph point by point; a change mid-morph continues from where it is | duration.slowease.standard340ms · cubic-bezier(0.2, 0, 0, 1) | 340mscubic-bezier(0.2, 0, 0, 1) | |
| Dot followsglides to the new latest value | duration.slowease.standard340ms · cubic-bezier(0.2, 0, 0, 1) | 340mscubic-bezier(0.2, 0, 0, 1) |
Reduced motion
Drawn in place with its dot, and data changes jump to the new shape.
Reduced motion
The line, its wash and the dot are drawn in their final place, with no reveal, and new data replaces the old shape at once.
AccessibilityARIA
Accessibility
- With
labelit's an image (role="img") named by the label. Write the label as the takeaway: "Revenue, last 30 days, rising". - Without
labelit'saria-hidden. Say what it shows in the text beside it. - A trend reads left to right in every text direction, so the sparkline sets
dir="ltr"on itself.