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.

KPI strip — four metrics with auto-trend sparklines

Revenue

€124K

+8.2%

Active users

8,412

+12.4%

Churn rate

2.1%

−0.4%

Avg. response (ms)

147

±0%

<x-wirekit::stats cols="4">
    <x-wirekit::stat label="Revenue" value="€124K" change="+8.2%" trend="up">
        <x-slot:sparkline><x-wirekit::sparkline :data="[42, 58, 71, 89, 104, 124]" /></x-slot:sparkline>
    </x-wirekit::stat>
    <x-wirekit::stat label="Active users" value="8,412" change="+12.4%" trend="up">
        <x-slot:sparkline><x-wirekit::sparkline :data="[6200, 6800, 7100, 7480, 7920, 8200, 8412]" /></x-slot:sparkline>
    </x-wirekit::stat>
    <x-wirekit::stat label="Churn rate" value="2.1%" change="−0.4%" trend="down">
        <x-slot:sparkline><x-wirekit::sparkline :data="[3.2, 3.0, 2.8, 2.6, 2.4, 2.2, 2.1]" trend="down" /></x-slot:sparkline>
    </x-wirekit::stat>
    <x-wirekit::stat label="Avg. response (ms)" value="147" change="±0%" trend="neutral">
        <x-slot:sparkline><x-wirekit::sparkline :data="[145, 148, 146, 144, 149, 147, 147]" trend="neutral" /></x-slot:sparkline>
    </x-wirekit::stat>
</x-wirekit::stats>

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.

Single dashboard cell — headline + sparkline + delta + caption

Monthly recurring revenue Live

€48.2K

+18% MoM

Trailing 9 months. Compounding ~6.7% per month for the last quarter.

<x-wirekit::card variant="elevated" class="max-w-[22rem]">
    <x-wirekit::card.body>
        <x-wirekit::row align="center" justify="between" class="mb-3">
            <x-wirekit::text variant="muted" size="sm" weight="medium" as="span">Monthly recurring revenue</x-wirekit::text>
            <x-wirekit::badge intent="success" size="sm">Live</x-wirekit::badge>
        </x-wirekit::row>
        <x-wirekit::row align="baseline" gap="sm" class="mb-2">
            <x-wirekit::heading level="2" class="leading-none">€48.2K</x-wirekit::heading>
            <x-wirekit::text variant="success" size="sm" weight="semibold" as="span">+18% MoM</x-wirekit::text>
        </x-wirekit::row>
        <x-wirekit::sparkline :data="[28, 31, 33, 36, 38, 41, 44, 46, 48.2]" />
        <x-wirekit::text variant="muted" size="sm" class="mt-2">Trailing 9 months. Compounding ~6.7% per month for the last quarter.</x-wirekit::text>
    </x-wirekit::card.body>
</x-wirekit::card>

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).

Auto vs forced trend — same shape, different semantics

Revenue (auto)

€48K

Up = good ✓

Churn (forced down)

3.8%

Up = bad ✗

P95 latency (neutral)

147ms

Steady ±0

<x-wirekit::grid cols="1 sm:3" gap="md">
    <x-wirekit::card variant="outlined">
        <x-wirekit::card.body>
            <x-wirekit::text variant="muted" size="xs" class="uppercase tracking-wider mb-1">Revenue (auto)</x-wirekit::text>
            <x-wirekit::text size="xl" weight="bold" class="mb-1">€48K</x-wirekit::text>
            <x-wirekit::sparkline :data="[20, 25, 32, 38, 42, 48]" />
            <x-wirekit::text variant="success" size="xs" class="mt-2">Up = good ✓</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>
    <x-wirekit::card variant="outlined">
        <x-wirekit::card.body>
            <x-wirekit::text variant="muted" size="xs" class="uppercase tracking-wider mb-1">Churn (forced down)</x-wirekit::text>
            <x-wirekit::text size="xl" weight="bold" class="mb-1">3.8%</x-wirekit::text>
            <x-wirekit::sparkline :data="[2.1, 2.4, 2.8, 3.2, 3.5, 3.8]" trend="down" />
            <x-wirekit::text variant="danger" size="xs" class="mt-2">Up = bad ✗</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>
    <x-wirekit::card variant="outlined">
        <x-wirekit::card.body>
            <x-wirekit::text variant="muted" size="xs" class="uppercase tracking-wider mb-1">P95 latency (neutral)</x-wirekit::text>
            <x-wirekit::text size="xl" weight="bold" class="mb-1">147ms</x-wirekit::text>
            <x-wirekit::sparkline :data="[145, 148, 146, 144, 149, 147]" trend="neutral" />
            <x-wirekit::text variant="muted" size="xs" class="mt-2">Steady ±0</x-wirekit::text>
        </x-wirekit::card.body>
    </x-wirekit::card>
</x-wirekit::grid>

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.

Inline sparklines as part of a sentence

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.

<x-wirekit::prose class="max-w-[40rem]">
    <p>
        Daily active users climbed
        <x-wirekit::sparkline :data="[1240, 1380, 1410, 1525, 1680, 1742, 1820]" inline />
        over the last seven days, up 47% week-over-week — the steepest sustained climb since launch.
    </p>
    <p>
        Meanwhile, error rate held flat at
        <x-wirekit::sparkline :data="[0.18, 0.19, 0.17, 0.18, 0.19, 0.18, 0.18]" inline trend="neutral" />
        roughly 0.18% — well within the 0.5% SLA.
    </p>
    <p>
        Sign-up conversion dipped briefly mid-week
        <x-wirekit::sparkline :data="[3.2, 3.4, 3.5, 2.9, 3.1, 3.3, 3.5]" inline />
        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.
    </p>
</x-wirekit::prose>

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.

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