Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add bar-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.

Need full control? These are zero-config themed presets. For arbitrary Chart.js types and options, use the free Chart. Chart.js is auto-loaded (no setup needed).

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.

Basic Usage

<x-aura::bar-chart
    :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
    :datasets="[['label' => 'Orders', 'data' => [65, 82, 74, 91, 110, 88, 60]]]"
/>
<x-aura::bar-chart
    :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
    :datasets="[['label' => 'Orders', 'data' => [65, 82, 74, 91, 110, 88, 60]]]"
/>

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],
]

Examples

Multi-Dataset (Grouped)

<x-aura::bar-chart
    :labels="['Q1', 'Q2', 'Q3', 'Q4']"
    :datasets="[
        ['label' => 'Product A', 'data' => [120, 145, 138, 162]],
        ['label' => 'Product B', 'data' => [88, 104, 115, 131]],
    ]"
    :colors="['primary', 'success']"
    height="300px"
/>
<x-aura::bar-chart
    :labels="['Q1', 'Q2', 'Q3', 'Q4']"
    :datasets="[
        ['label' => 'Product A', 'data' => [120, 145, 138, 162]],
        ['label' => 'Product B', 'data' => [88, 104, 115, 131]],
    ]"
    :colors="['primary', 'success']"
    height="300px"
/>

Horizontal Bars

<x-aura::bar-chart
    :labels="['Engineering', 'Marketing', 'Sales', 'Support', 'Design']"
    :datasets="[['label' => 'Headcount', 'data' => [42, 18, 31, 24, 12]]]"
    :horizontal="true"
    colors="info"
    height="260px"
/>
<x-aura::bar-chart
    :labels="['Engineering', 'Marketing', 'Sales', 'Support', 'Design']"
    :datasets="[['label' => 'Headcount', 'data' => [42, 18, 31, 24, 12]]]"
    :horizontal="true"
    colors="info"
    height="260px"
/>

Stacked Bars

<x-aura::bar-chart
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[
        ['label' => 'Direct', 'data' => [400, 480, 520, 590, 610, 680]],
        ['label' => 'Referral', 'data' => [220, 260, 290, 310, 340, 370]],
        ['label' => 'Organic', 'data' => [180, 210, 240, 270, 300, 320]],
    ]"
    :colors="['primary', 'success', 'info']"
    :stacked="true"
    height="300px"
/>
<x-aura::bar-chart
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[
        ['label' => 'Direct',   'data' => [400, 480, 520, 590, 610, 680]],
        ['label' => 'Referral', 'data' => [220, 260, 290, 310, 340, 370]],
        ['label' => 'Organic',  'data' => [180, 210, 240, 270, 300, 320]],
    ]"
    :colors="['primary', 'success', 'info']"
    :stacked="true"
    height="300px"
/>

Accessibility

  • The component renders a <div> with role="img" and an auto-generated aria-label based on the dataset labels (e.g., "Bar chart: Product A, Product B").
  • For data accessibility beyond the visual chart, pair the component with a visually hidden <table> or summary.
  • Chart.js tooltips are pointer-accessible but not keyboard-reachable; include tabular data alongside the chart for full keyboard and screen-reader coverage.
  • Color is not the sole differentiator between datasets — the legend labels also identify each series.