Sparkline
<x-wirekit::sparkline> renders a tiny axis-less line chart for inline KPI strips, dashboard cells, and "headline number + trend" widgets. It delegates to <x-wirekit-chart type="sparkline"> so both adapters render correctly: ApexCharts uses native sparkline mode (chart-stripping), Chart.js falls back to a plain line.
Dashboard KPI strip
The canonical use case: a row of headline numbers, each paired with a sparkline showing the recent trend, plus a delta callout. The sparkline auto-colors green/red/neutral based on whether the series climbs, falls, or stays flat — pass trend to override when business semantics flip the meaning.
The auto-trend detector compares the first and last values: if the last is materially higher → 'up' (green), materially lower → 'down' (red), otherwise → 'neutral' (muted). The Avg. response sparkline above uses trend="neutral" because the variance is noise — auto-detection would pick a color from a meaningless 2ms swing.
Single dashboard cell
A richer single-stat composition with sparkline, headline, delta, and a brief context line. Drop into any card grid where one metric needs prominence.
€48.2K
+18% MoMTrailing 9 months. Compounding ~6.7% per month for the last quarter.
Trend override — three side-by-side comparisons
When the auto-detected trend doesn't match the business semantics, force the color explicitly. Three canonical examples below: revenue (auto = up, GREEN, correct), churn (auto = up = bad, but auto-detector colors it green — force down so it renders red, signaling the BAD trend), and steady metric (auto-detector might pick a color from noise — force neutral).
Revenue (auto)
€48K
Up = good ✓
Churn (forced down)
3.8%
Up = bad ✗
P95 latency (neutral)
147ms
Steady ±0
Acceptable trend values: 'up' / 'down' / 'neutral' / 'auto' / null. Invalid values fall through to auto-detection.
Inline mode — embedded in flowing text
Pass inline to render at typography height (1.25em tall, 4rem wide) so the sparkline sits inside a paragraph without breaking line rhythm. Useful in narrative dashboards, status reports, and AI-generated summaries.
Daily active users climbed over the last seven days, up 47% week-over-week — the steepest sustained climb since launch.
Meanwhile, error rate held flat at roughly 0.18% — well within the 0.5% SLA.
Sign-up conversion dipped briefly mid-week before recovering Friday afternoon. The Tuesday cohort is still under investigation; suspected: a stale Stripe webhook secret rotation that broke server-side validation for ~6 hours.
License note
When the active library is ApexCharts (charts.library => 'apexcharts'), the ApexCharts non-MIT license terms apply — see the License section on the Chart overview page for the full details. WireKit's Sparkline glue (this component) is MIT-licensed regardless of which adapter is active.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data |
array | [] |
Numeric data points |
trend |
string|null | null (auto-detect) |
Force trend color: up / down / neutral |
inline |
bool | false |
Inline-block + 1.25em height + 4rem width |
height |
string|null | auto | CSS height override |
scope |
string|null | null |
Personalization scope |
library |
string|null | null |
Per-instance chart-library override. Forwards to the underlying <x-wirekit-chart> — see chart Props. |
Accessibility
The Keyboard Interaction section below is complete and it is not the whole story. A sparkline is
presentational and has no tab stop — true, and it tells somebody using a screen reader nothing
about the trend it draws. The shape is drawn to <svg>; the information in it has no text form.
A sparkline almost never travels alone: it sits beside the number it summarizes. That pairing is the answer, and it costs one attribute.
{{-- 1. The number is already text. Give the shape a name that says what it ADDS —
the direction and the window, not "sparkline". --}}
<x-wirekit::stat label="Revenue" value="€42,180">
<x-slot:sparkline>
<span role="img" aria-label="Up 12% over the last 30 days">
<x-wirekit::sparkline :data="$revenue" aria-hidden="true" />
</span>
</x-slot:sparkline>
</x-wirekit::stat>
{{-- 2. Standing alone — in a table cell, say — it has to carry the whole claim itself. --}}
<span role="img" aria-label="Sessions, last 7 days: rising from 1,200 to 1,850">
<x-wirekit::sparkline :data="$sessions" aria-label="Sessions over the reporting period" />
</span>
A decorative sparkline says so
If the same trend is already stated in text right beside it, the shape is decoration and
repeating it is noise. Mark it aria-hidden="true" rather than labeling it twice.
For a full-size chart — axes, legend, many series — the label alone is not enough. The two patterns for that, including the visually-hidden data table, are on Chart.
Keyboard Interaction
This component is purely presentational and does not respond to keyboard input.
Pitfalls
- Don't use sparklines as the primary chart visualization. They're decorative emphasis around a number — for full data exploration use
<x-wirekit-chart>. - Sparklines have no axis labels by design. Pair every sparkline with a textual headline number so the data has context.
Design Tokens
| Token | Used for |
|---|---|
--color-wk-success |
up trend stroke + dot fill |
--color-wk-danger |
down trend stroke + dot fill |
--color-wk-text-muted |
neutral trend stroke + dot fill |
See Also
- ApexCharts Sparklines demo
- Chart overview