Laravel Stat Chart Component

Pro

KPI metric card combining a label, value, change badge, optional icon, and an embedded Sparkline trend visualization.

A Stat Chart 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::stat-chart>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

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

Usage

<x-aura::stat-chart
    label="Monthly Revenue"
    value="$12,480"
    :change="8.4"
    changeLabel="vs last month"
    :trend="[42, 58, 51, 67, 72, 61, 80, 74, 88]"
/>

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

Overview

The Stat Chart is a self-contained KPI card that composes a metric label, a prominent value, an optional percentage-change badge (color-coded green/red), an optional icon, and a Sparkline trend visualization — all in a single component. It is the quickest way to build a dashboard metrics row.

The :trend prop accepts the same numeric array that <x-aura::sparkline> takes. The :trendType prop ('line' or 'bar') controls whether the embedded sparkline renders as a line or a bar series.

Props

Prop	Type	Default	Description
`label`	`string`	`''`	Metric name displayed above the value.
`value`	`string\|int\|float`	`''`	Main metric value (formatted as you need — e.g., `'$12,480'`, `'99.9%'`).
`change`	`int\|float\|null`	`null`	Percentage change to display as a badge (e.g., `8.4` for +8.4%). Pass `null` to hide.
`changeLabel`	`string\|null`	`null`	Supplementary text next to the change badge (e.g., `'vs last month'`).
`trend`	`array\|null`	`null`	Ordered numeric array passed to the embedded Sparkline. Pass `null` to hide the sparkline.
`trendType`	`string`	`'line'`	Sparkline type: `'line'` or `'bar'`.
`color`	`string`	`'primary'`	Color token for the icon tint: `primary`, `success`, `danger`, `warning`, `info`.
`icon`	`string\|null`	`null`	Aura icon name for the optional icon badge (e.g., `'trending-up'`).
`invertChange`	`bool`	`false`	When `true`, a negative change is displayed in green and a positive change in red (useful for metrics where lower is better, e.g., error rate).