Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add stat-chart

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Pro Component — This component requires an Aura UI Pro license.

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.

Trend separately? If you only need the sparkline visualization without the full card chrome, use <x-aura::sparkline> directly.

Basic Usage

Monthly Revenue
8.4%
$12,480
vs last month
<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]"
/>
<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]"
/>

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

Examples

With Icon

Active Users
12.1%
3,241
this week
<x-aura::stat-chart
    label="Active Users"
    value="3,241"
    :change="12.1"
    changeLabel="this week"
    icon="users"
    color="primary"
    :trend="[210, 250, 230, 280, 310, 290, 340]"
/>
<x-aura::stat-chart
    label="Active Users"
    value="3,241"
    :change="12.1"
    changeLabel="this week"
    icon="users"
    color="primary"
    :trend="[210, 250, 230, 280, 310, 290, 340]"
/>

Negative Change (Error Rate — Inverted)

Error Rate
18.3%
0.42%
vs last week
<x-aura::stat-chart
    label="Error Rate"
    value="0.42%"
    :change="-18.3"
    changeLabel="vs last week"
    :invertChange="true"
    color="success"
    :trend="[5, 4, 6, 4, 3, 2, 1]"
/>
<x-aura::stat-chart
    label="Error Rate"
    value="0.42%"
    :change="-18.3"
    changeLabel="vs last week"
    :invertChange="true"
    color="success"
    :trend="[5, 4, 6, 4, 3, 2, 1]"
/>

Bar Trend, No Change Badge

Weekly Orders
892
<x-aura::stat-chart
    label="Weekly Orders"
    value="892"
    trendType="bar"
    color="info"
    :trend="[110, 145, 132, 168, 155, 180, 172]"
/>
<x-aura::stat-chart
    label="Weekly Orders"
    value="892"
    trendType="bar"
    color="info"
    :trend="[110, 145, 132, 168, 155, 180, 172]"
/>

Dashboard Row

Revenue
5.3%
$48,200
Conversions
0.4%
3.8%
vs last period
Churn
0.3%
1.2%
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
    <x-aura::stat-chart
        label="Revenue"
        value="$48,200"
        :change="5.3"
        icon="trending-up"
        color="primary"
        :trend="[320, 410, 380, 450, 430, 510, 490]"
    />
    <x-aura::stat-chart
        label="Conversions"
        value="3.8%"
        :change="-0.4"
        changeLabel="vs last period"
        icon="chart-bar"
        color="warning"
        :trend="[4.1, 4.0, 3.9, 4.2, 3.8, 3.7, 3.8]"
    />
    <x-aura::stat-chart
        label="Churn"
        value="1.2%"
        :change="-0.3"
        :invertChange="true"
        icon="x-circle"
        color="danger"
        :trend="[2.1, 1.9, 1.8, 1.6, 1.5, 1.3, 1.2]"
    />
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
    <x-aura::stat-chart label="Revenue" value="$48,200" :change="5.3"
        icon="trending-up" color="primary"
        :trend="[320, 410, 380, 450, 430, 510, 490]" />

    <x-aura::stat-chart label="Conversions" value="3.8%" :change="-0.4"
        changeLabel="vs last period" icon="chart-bar" color="warning"
        :trend="[4.1, 4.0, 3.9, 4.2, 3.8, 3.7, 3.8]" />

    <x-aura::stat-chart label="Churn" value="1.2%" :change="-0.3"
        :invertChange="true" icon="x-circle" color="danger"
        :trend="[2.1, 1.9, 1.8, 1.6, 1.5, 1.3, 1.2]" />
</div>

Accessibility

  • The card uses <div> with no interactive role; wrap in a <section aria-label="…"> if the stat group needs its own landmark.
  • The change badge includes a screen-reader-only directional symbol (▲ / ▼) plus the numeric value so color alone does not convey direction.
  • The embedded sparkline renders as role="img" with an auto-generated label describing the trend; the numeric value and label are plain readable text, and the change badge carries an aria-label (e.g. "up 12.5 percent vs last month").