---
title: Sparkline
description: Inline trend sparkline — axis-less line chart for KPI strips and dashboard cells.
visibility: guest
draft: false
related:
  - /components/chart
  - /components/charts-apex/sparklines
  - /components/charts-chartjs/advanced
---

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

:::preview{title="KPI strip — four metrics with auto-trend sparklines"}
<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.

:::preview{title="Single dashboard cell — headline + sparkline + delta + caption"}
<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`).

:::preview{title="Auto vs forced trend — same shape, different semantics"}
<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.

:::preview{title="Inline sparklines as part of a sentence"}
<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](https://apexcharts.com/license/) apply — see the [License section on the Chart overview page](/components/chart#license-apexcharts-only) 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](/components/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 |

## See Also

- [ApexCharts Sparklines demo](/components/charts-apex/sparklines)
- [Chart](/components/chart) overview