Sparkline
A tiny trend with no axes, for a tile, a table cell or a line of text. Pick it when the shape matters more than the numbers.
- Sparkline
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Sparkline
VisitsSign-upsLoad timeRefunds
Dark theme, Sparkline
VisitsSign-upsLoad timeRefunds
High contrast theme, Sparkline
VisitsSign-upsLoad timeRefunds
UsageLink to the section Usage
import { Sparkline } from '@skribly/ui/charts'<Sparkline values={last28} label="Visits, last 28 days: rising from 1,204 to 1,530" />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- One image with one name: the label has to say what the shape shows, in words.
- With fewer than two values it draws a dashed rule, and the label should say there is no trend yet.
- The line uses a system colour in forced colours.
This demo runs through axe in all three themes on every test run. See what the tests check.