Laravel Bar Chart Component
ProZero-config themed bar chart preset powered by Chart.js, supporting vertical, horizontal, and stacked layouts with Aura palette colors.
A Bar 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::bar-chart>
Installation
composer require bluestarsystem/aura-uiThe Bar Chart is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →
Usage
<x-aura::bar-chart
:labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
:datasets="[['label' => 'Orders', 'data' => [65, 82, 74, 91, 110, 88, 60]]]"
/>See the full API, props and live examples in the Bar Chart documentation.
Overview
The Bar Chart is a themed Chart.js preset for categorical comparisons. It supports vertical bars (default), horizontal bars (:horizontal="true"), and stacked bar layouts (:stacked="true"). Like Area Chart, colors are resolved from Aura palette tokens — no manual hex codes needed. Multiple datasets with distinct palette colors are fully 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 |
[] |
Category labels. One entry per bar group. |
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']). |
height |
string |
'280px' |
Container height as a CSS value (e.g., '320px'). |
legend |
bool |
true |
Show the chart legend. |
gridLines |
bool |
true |
Show grid lines. |
horizontal |
bool |
false |
Render bars horizontally (swaps X and Y axes). |
stacked |
bool |
false |
Stack datasets on top of each other instead of grouping side-by-side. |
options |
array |
[] |
Additional Chart.js options merged over the preset defaults. |
Dataset Structure
Each dataset needs label and data; the preset assigns the bar fill color automatically from the colors token(s):
[
'label' => 'New Users',
'data' => [65, 82, 74, 91, 110, 88, 60],
]
See more examples and every variant in the Bar Chart documentation.