Laravel Chart Component

Free · MIT

Data visualization component powered by Chart.js, supporting line, bar, pie, doughnut, and area chart types.

A 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::chart>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::chart
    type="line"
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[
        [
            'label' => 'Revenue',
            'data' => [1200, 1900, 3000, 5000, 4200, 6100],
            'borderColor' => '#6366f1',
            'backgroundColor' => 'rgba(99, 102, 241, 0.1)',
            'fill' => true,
            'tension' => 0.4,
        ],
    ]"
/>

See the full API, props and live examples in the Chart documentation.

Overview

The Chart component provides a declarative wrapper around Chart.js for rendering data visualizations. It supports multiple chart types including line, bar, pie, doughnut, and area charts. Data and configuration options are passed as props, and the chart renders responsively within its container. Chart.js is loaded dynamically — it tries the local vendor asset first, then falls back to CDN.

Props

Prop	Type	Default	Description
`type`	`string`	`'line'`	Chart type: `line`, `bar`, `pie`, `doughnut`, or `area`.
`labels`	`array`	`[]`	Array of labels for the x-axis (or segments for pie/doughnut).
`datasets`	`array`	`[]`	Array of dataset objects following Chart.js format.
`height`	`string`	`'300px'`	Chart container height (CSS value with unit).
`responsive`	`bool`	`true`	Enable responsive resizing.
`legend`	`bool`	`true`	Show the chart legend.
`options`	`array`	`[]`	Additional Chart.js options for customizing axes, tooltips, etc.

Dataset Structure

Each dataset object follows the standard Chart.js dataset format:

[
    'label' => 'Revenue',
    'data' => [1200, 1900, 3000, 5000, 4200, 6100],
    'borderColor' => '#6366f1',
    'backgroundColor' => 'rgba(99, 102, 241, 0.1)',
    'fill' => true,
    'tension' => 0.4,
]