Components

Sparkline

A tiny inline trend line drawn from a data array — for KPI cards, tables and stats.

php artisan blatui:add sparkline

Revenue $12.4k

Churn 2.1%

<div class="flex flex-wrap items-center gap-8">
    <div class="flex flex-col gap-1">
        <span class="text-muted-foreground text-xs">Revenue</span>
        <span class="inline-flex items-center gap-2 text-lg font-semibold tabular-nums">
            $12.4k
            <x-ui.sparkline :data="[4, 8, 5, 10, 7, 12, 9, 14, 11, 16]" :width="96" :height="28" />
        </span>
    </div>
    <div class="flex flex-col gap-1">
        <span class="text-muted-foreground text-xs">Churn</span>
        <span class="inline-flex items-center gap-2 text-lg font-semibold tabular-nums">
            2.1%
            <x-ui.sparkline :data="[16, 12, 14, 8, 10, 6, 9, 4]" :width="96" :height="28" class="text-rose-500" />
        </span>
    </div>
    <x-ui.sparkline :data="[2, 3, 2, 4, 3, 5, 6, 5, 7, 6, 8]" :width="160" :height="40" class="text-emerald-500" />
</div>

API Reference

Props, slots and exposed methods for <x-ui.sparkline>.

Props

Prop	Type	Default	Description
`data`*	`array`	`[]`	The series of numbers to plot. Needs at least two points to draw a trend line; the path scales to the data's own min/max.
`width`	`int`	`100`	SVG width in pixels and the viewBox width.
`height`	`int`	`28`	SVG height in pixels and the viewBox height.
`area`	`bool`	`true`	Fill the area under the line with a faint tint of the current color.
`strokeWidth`	`number`	`1.5`	Line thickness. Also used as inner padding so the stroke stays inside the viewBox.
`ariaLabel`	`string`	`'Trend'`	Accessible name for the SVG (role="img" aria-label).

* Required.