Laravel Sparkline Component

Pro

Compact inline SVG trend line or bar chart for embedding key metric trends inside stat cards, tables, and dashboards.

A Sparkline built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::sparkline>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Sparkline is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

Usage

<x-aura::sparkline :data="[3, 7, 4, 9, 6, 11, 8]" />

See the full API, props and live examples in the Sparkline documentation.

Overview

The Sparkline renders a compact SVG trend visualization — either a line (with optional area fill) or a bar series — sized to sit inline with text, inside table cells, or alongside metric values. It requires no JavaScript: the SVG is computed server-side from the :data array. Color follows the Aura palette tokens (primary, success, danger, warning, info).

Props

Prop	Type	Default	Description
`data`	`array`	`[]`	Ordered array of numeric values to plot.
`type`	`string`	`'line'`	Chart type: `'line'` or `'bar'`.
`color`	`string`	`'primary'`	Color token: `primary`, `success`, `danger`, `warning`, `info`.
`width`	`int\|string`	`120`	SVG viewport width in pixels.
`height`	`int\|string`	`32`	SVG viewport height in pixels.
`area`	`bool`	`false`	Fill the area below the line with a gradient (line type only).
`showDot`	`bool`	`false`	Render a dot on the last data point.
`strokeWidth`	`int\|float`	`2`	Line stroke width in pixels.
`label`	`string\|null`	`null`	Accessible label for the SVG element (`aria-label`).