Sparklines

Sparklines are tiny axis-less line charts embedded inside text or dashboard cells — perfect for "headline number + trend at a glance" widgets. WireKit ships a dedicated <x-wirekit::sparkline> component that delegates to <x-wirekit-chart type="sparkline">.

ApexCharts has native sparkline mode (chart.sparkline.enabled: true) which strips axes, grid, and legends. Chart.js falls back to a plain line — visually similar but without the chrome-stripping behavior.

Basic Example — KPI card with inline sparkline

<x-wirekit::stat label="Revenue" value="€124K" change="+8% MoM" trend="up" class="max-w-[18rem]">
    <x-slot:sparkline><x-wirekit::sparkline library="apexcharts" :data="[42, 58, 71, 89, 104, 124]" aria-hidden="true" /></x-slot:sparkline>
</x-wirekit::stat>

The sparkline auto-detects the trend (up / down / neutral) from the first vs last data points and tints the line accordingly — green for up, red for down, muted for flat. The cell wrapper above pins a max-width and a baseline-aligned headline + delta row so the sparkline sits on its own row at the cell's full width — same layout pattern the canonical Sparkline component page uses for its dashboard KPI strip.

Inline mode — Sparkline embedded in flowing text

<p style="font-size: 1rem; line-height: 1.6;">
    DAU has been climbing
    <x-wirekit::sparkline library="apexcharts" :data="[1240, 1380, 1410, 1525, 1680, 1742, 1820]" inline aria-label="Weekly active users, rising" />
    over the last seven days, up 47% since launch.
</p>

:inline="true" renders at the surrounding text height (1.25em) with a 4rem fixed width — fits naturally inside a sentence without breaking line height.

Auto-trend colors — Up / Down / Neutral

The sparkline auto-detects its trend from the first vs last data point and tints the line accordingly: green (--color-wk-success) when the last value is greater than the first, red (--color-wk-danger) when it's less, muted gray (--color-wk-text-muted) when they're equal. Manual override via the trend prop is shown in the fourth tile — useful when the numeric direction and the business meaning point opposite ways (e.g. churn climbing is numerically up but semantically down).

<x-wirekit::stats cols="2" class="max-w-[32rem]">
    <x-wirekit::stat label="Revenue" value="€124K" change="+47%" trend="up" description="auto → up → green">
        <x-slot:sparkline><x-wirekit::sparkline library="apexcharts" :data="[42, 58, 71, 89, 104, 124]" aria-hidden="true" /></x-slot:sparkline>
    </x-wirekit::stat>
    <x-wirekit::stat label="Active users" value="2,840" change="−18%" trend="down" description="auto → down → red">
        <x-slot:sparkline><x-wirekit::sparkline library="apexcharts" :data="[3450, 3380, 3210, 3050, 2920, 2840]" aria-hidden="true" /></x-slot:sparkline>
    </x-wirekit::stat>
    <x-wirekit::stat label="Error rate" value="0.18%" change="flat" trend="neutral" description="auto → neutral → muted">
        <x-slot:sparkline><x-wirekit::sparkline library="apexcharts" :data="[0.18, 0.19, 0.17, 0.18, 0.19, 0.18]" aria-hidden="true" /></x-slot:sparkline>
    </x-wirekit::stat>
    <x-wirekit::stat label="Churn" value="3.0%" change="+43%" trend="down" description='trend="down" — auto would be green'>
        <x-slot:sparkline><x-wirekit::sparkline library="apexcharts" :data="[2.1, 2.3, 2.6, 2.8, 3.0]" trend="down" aria-hidden="true" /></x-slot:sparkline>
    </x-wirekit::stat>
</x-wirekit::stats>

The fourth cell flips the rule on its head — the data climbs (auto would tint green), but the business meaning of "churn climbing" is bad, so trend="down" forces the red tint. Acceptable manual values: 'up' / 'down' / 'neutral' / 'auto' / null. Anything else falls through to auto-detection.

Dashboard grid — Multi-KPI strip

<x-wirekit::grid cols="1 sm:2 lg:4" gap="md">
    @foreach ([
        ['MRR',     '€121K', $mrrTrend,     'up'],
        ['Churn',   '2.1%',  $churnTrend,   'down'],
        ['NPS',     '72',    $npsTrend,     'up'],
        ['Tickets', '48',    $ticketsTrend, 'down'],
    ] as [$label, $value, $data, $hint])
        <x-wirekit::card>
            <x-wirekit::card.body>
                <x-wirekit::text size="sm" intent="muted">{{ $label }}</x-wirekit::text>
                <x-wirekit::heading level="3" size="xl">{{ $value }}</x-wirekit::heading>
                <x-wirekit::sparkline :data="$data" :trend="$hint" aria-label="{{ $label }} trend" />
            </x-wirekit::card.body>
        </x-wirekit::card>
    @endforeach
</x-wirekit::grid>

The grid, the label and the figure are all primitives: grid already does the responsive column count, text carries the muted style and heading the scale. Written as raw <div style> this block taught four inline styles a developer then has to keep in step with the theme by hand — and it dropped $hint, which the array above computes and the paragraph under the previous example is entirely about.

Trend prop override

When the auto-detected trend doesn't match the business semantics (e.g. churn going UP is BAD), force the color explicitly:

<x-wirekit::sparkline :data="[2.1, 2.3, 2.6, 2.8, 3.0]" trend="down" aria-label="Cost per acquisition, rising — shown as a decline because rising cost is bad news" />
{{-- Auto-detect would say 'up' (numerically); the business says
     this is a 'down' trend (churn climbing). Force the red tint. --}}

Acceptable values: 'up' / 'down' / 'neutral' / 'auto' / null. Invalid values fall through to auto-detection.

License note

ApexCharts is non-MIT — see the License section on the Chart overview page and apexcharts.com/license for the full terms.

See Also

• Line charts for full axis-rendered trend charts
• <x-wirekit::sparkline> component reference

Design Tokens

See ApexCharts adapter — Design Tokens for the color, typography, and grid tokens shared across every ApexCharts demo.