Skip to content

No results for

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

Basic Usage

<x-aura::area-chart
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[['label' => 'Revenue', 'data' => [1200, 1900, 1600, 2400, 2100, 2800]]]"
/>
<x-aura::area-chart
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[['label' => 'Revenue', 'data' => [1200, 1900, 1600, 2400, 2100, 2800]]]"
/>

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

Examples

Multi-Dataset

<x-aura::area-chart
    :labels="['Q1', 'Q2', 'Q3', 'Q4']"
    :datasets="[
        ['label' => '2025', 'data' => [42000, 58000, 61000, 74000]],
        ['label' => '2024', 'data' => [31000, 44000, 49000, 56000]],
    ]"
    :colors="['primary', 'info']"
    height="300px"
/>
<x-aura::area-chart
    :labels="['Q1', 'Q2', 'Q3', 'Q4']"
    :datasets="[
        ['label' => '2025', 'data' => [42000, 58000, 61000, 74000]],
        ['label' => '2024', 'data' => [31000, 44000, 49000, 56000]],
    ]"
    :colors="['primary', 'info']"
    height="300px"
/>

Without Legend and Grid Lines

<x-aura::area-chart
    :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
    :datasets="[['label' => 'Sessions', 'data' => [320, 410, 390, 480, 520, 310, 280]]]"
    :legend="false"
    :gridLines="false"
    colors="success"
    height="200px"
/>
<x-aura::area-chart
    :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
    :datasets="[['label' => 'Sessions', 'data' => [320, 410, 390, 480, 520, 310, 280]]]"
    :legend="false"
    :gridLines="false"
    colors="success"
    height="200px"
/>

Custom Chart.js Options

Pass any Chart.js option object via :options to override the preset (e.g., custom tooltip callbacks or axis ticks):

<x-aura::area-chart
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[['label' => 'MRR', 'data' => [4800, 5200, 5100, 5900, 6400, 6800]]]"
    :options="[
        'plugins' => [
            'tooltip' => [
                'callbacks' => []
            ]
        ],
        'scales' => [
            'y' => ['beginAtZero' => true]
        ]
    ]"
/>

Accessibility

  • The component renders a <div> with role="img" and an auto-generated aria-label based on the dataset labels (e.g., "Area chart: Revenue, Sessions").
  • 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.