---
title: Sparklines
description: Inline KPI sparklines and dashboard-grid patterns using the sparkline component.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-apex/line
---

# 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

:::preview{title="Single KPI cell — headline + sparkline + delta"}
<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]" /></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](/components/sparkline#dashboard-kpi-strip) uses for its dashboard KPI strip.

## Inline mode — Sparkline embedded in flowing text

:::preview{title="Sparkline embedded in a sentence"}
<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 />
    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`).

:::preview{title="Sparkline auto-trend color palette"}
<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]" /></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]" /></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]" /></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" /></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

```blade
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem;">
    @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>
                <div style="font-size: 0.8125rem; color: var(--color-wk-text-muted);">{{ $label }}</div>
                <div style="font-size: 1.5rem; font-weight: 700;">{{ $value }}</div>
                <x-wirekit::sparkline :data="$data" />
            </x-wirekit::card.body>
        </x-wirekit::card>
    @endforeach
</div>
```

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

```blade
<x-wirekit::sparkline :data="[2.1, 2.3, 2.6, 2.8, 3.0]" trend="down" />
{{-- 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](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Line charts](./line.md) for full axis-rendered trend charts
- [`<x-wirekit::sparkline>` component reference](/components/sparkline) (forthcoming)

## Design Tokens

See [ApexCharts adapter — Design Tokens](/components/charts-apex#design-tokens) for the color, typography, and grid tokens shared across every ApexCharts demo.