Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add sparkline

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.

Use inside a stat card? The Stat Chart composes a Sparkline automatically — pass your trend data to :trend and you get the label, value, change badge, and sparkline in one component.

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

Basic Usage

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

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

Examples

Area Fill

<x-aura::sparkline :data="[5, 12, 8, 15, 10, 18, 14, 22, 19]" :area="true" color="primary" />
<x-aura::sparkline :data="[5, 12, 8, 15, 10, 18, 14, 22, 19]" :area="true" color="primary" />

Color Variants with Last-Point Dot

<div class="flex flex-col gap-3">
    <x-aura::sparkline :data="[3, 7, 4, 9, 6, 11, 8]" color="primary" :showDot="true" />
    <x-aura::sparkline :data="[8, 6, 9, 5, 10, 7, 12]" color="success" :showDot="true" />
    <x-aura::sparkline :data="[12, 9, 7, 5, 4, 3, 2]" color="danger" :showDot="true" />
    <x-aura::sparkline :data="[5, 8, 6, 9, 7, 10, 8]" color="warning" :showDot="true" />
    <x-aura::sparkline :data="[2, 5, 3, 7, 5, 9, 6]" color="info" :showDot="true" />
</div>
<x-aura::sparkline :data="[3, 7, 4, 9, 6, 11, 8]" color="primary" :showDot="true" />
<x-aura::sparkline :data="[8, 6, 9, 5, 10, 7, 12]" color="success" :showDot="true" />
<x-aura::sparkline :data="[12, 9, 7, 5, 4, 3, 2]" color="danger" :showDot="true" />
<x-aura::sparkline :data="[5, 8, 6, 9, 7, 10, 8]" color="warning" :showDot="true" />
<x-aura::sparkline :data="[2, 5, 3, 7, 5, 9, 6]" color="info" :showDot="true" />

Bar Type

<x-aura::sparkline :data="[4, 8, 6, 10, 7, 12, 9, 14, 11]" type="bar" color="success" :width="140" :height="40" />
<x-aura::sparkline :data="[4, 8, 6, 10, 7, 12, 9, 14, 11]" type="bar" color="success" :width="140" :height="40" />

Custom Size

<x-aura::sparkline :data="[3, 7, 4, 9, 6, 11, 8, 13, 10]" :area="true" color="info" :width="200" :height="48" :strokeWidth="2" />
<x-aura::sparkline
    :data="[3, 7, 4, 9, 6, 11, 8, 13, 10]"
    :area="true"
    color="info"
    :width="200"
    :height="48"
    :strokeWidth="2"
/>

Accessibility

  • The sparkline always renders as role="img" with an accessible name. Provide a label for a meaningful description; when omitted, an automatic label is generated (e.g. "Sparkline, 7 points, trending up"). The inner shapes are aria-hidden, so screen readers announce only the single accessible name.
  • Provide a meaningful label whenever the sparkline conveys information that is not already expressed in surrounding text (e.g., in a table column where the header already names the metric).
  • Color is not the sole channel of information: the shape of the line encodes the trend independently of color.