Laravel Area Chart Component
ProZero-config themed area chart preset powered by Chart.js, with automatic Aura palette colors, legend, and grid lines.
A Area 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::area-chart>
Installation
composer require bluestarsystem/aura-uiThe Area Chart is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →
Usage
<x-aura::area-chart
:labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
:datasets="[['label' => 'Revenue', 'data' => [1200, 1900, 1600, 2400, 2100, 2800]]]"
/>See the full API, props and live examples in the Area Chart documentation.
Overview
The Area Chart is a themed Chart.js preset that renders a smooth filled area chart using Aura's color palette. Pass :labels and :datasets (label + data only — no manual color hex needed) and the component handles fill colors, gradients, border radius, and responsiveness automatically. Multiple datasets with distinct palette colors are supported.
Chart.js is loaded automatically via an inline script included in the component — no global import or @stack('scripts') setup is required beyond having Aura's layout in place.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
labels |
array |
[] |
X-axis labels. One entry per data point. |
datasets |
array |
[] |
Array of dataset objects. Each needs at minimum 'label' and 'data' keys. |
colors |
string|array |
'primary' |
Color token string ('primary') or array of tokens for multi-dataset charts (['primary', 'success', 'danger']). |
height |
string |
'280px' |
Container height as a CSS value (e.g., '320px'). |
legend |
bool |
true |
Show the chart legend. |
gridLines |
bool |
true |
Show horizontal grid lines. |
options |
array |
[] |
Additional Chart.js options merged over the preset defaults. |
Dataset Structure
Each dataset needs label and data; all other Chart.js dataset properties are optional and will be overridden by the preset's palette:
[
'label' => 'Revenue',
'data' => [1200, 1900, 1600, 2400, 2100, 2800],
]
See more examples and every variant in the Area Chart documentation.