---
title: Stat with Sparkline
description: Compact KPI card combining label, value, sparkline trend, and source citation.
visibility: guest
draft: false
---

# 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

:::preview{title="Stat with sparkline + citation"}
<x-wirekit::stat label="Total Events" value="2.4M" change="+12.3%" trend="up" citation="Source: Q1 2026 events table (snapshot 2026-04-25)">
    <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>
:::

:::source{language="blade"}
<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](/components/stat) — `value`, `change`, `trend`, `citation`, named `sparkline` slot
- Inline SVG `<polyline>` — no WireKit chart component needed for a static spark

## See Also

- [Live KPI Strip](/blueprints/recipes/live-kpi-strip) — same compact density via `<x-wirekit::ticker>` instead of `stat`
- [Stat component docs](/components/stat) — full prop and slot reference