Skip to main content
WireKit

Stat with Sparkline

A focused KPI surface that combines the four most-requested stat features in one card: large value, change indicator, inline sparkline trend, and a small citation footnote. Good for analytics dashboards where every card needs context, not just a number.

Recipe

Stat with sparkline + citation
Total Events
2.4M
increased +12.3%
Source: Q1 2026 events table (snapshot 2026-04-25) 
<x-wirekit::stat
    label="Total Events"
    value="2.4M"
    change="+12.3%"
    trend="up"
    citation="Source: Q1 2026 events table (snapshot {{ now()->format('Y-m-d') }})"
>
    <x-slot:sparkline>
        <svg viewBox="0 0 80 24" width="80" height="24" aria-hidden="true" style="display: block">
            <polyline
                points="0,18 10,16 20,14 30,10 40,12 50,8 60,6 70,4 80,2"
                fill="none"
                stroke="var(--color-wk-accent)"
                stroke-width="1.5"
            />
        </svg>
    </x-slot:sparkline>
</x-wirekit::stat>

Variations

  • Server-driven trend line: Replace the static <polyline points="..."> with <polyline :points="$points"> where $points is a string built from a 7-day or 30-day data window in your Livewire component.
  • Progress instead of trend: Swap <x-slot:sparkline> for <x-slot:progress> and pass a <x-wirekit::progress> component when the metric represents quota usage rather than a time series.
  • Negative trend coloring: Set stroke="var(--color-wk-danger)" when $delta < 0 to keep the visual reading consistent with the change indicator.

Components Used

  • Stat — value, change, trend, citation, named sparkline slot
  • Inline SVG <polyline> — no WireKit chart component needed for a static spark

See Also