Skip to content

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.

Basic 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,
        ],
    ]"
/>

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

Examples

Revenue Line Chart

<x-aura::chart
    type="line"
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[
        [
            'label' => 'Revenue 2025',
            'data' => [4200, 5100, 6800, 7200, 8900, 9400],
            'borderColor' => '#6366f1',
            'backgroundColor' => 'rgba(99, 102, 241, 0.1)',
            'fill' => true,
            'tension' => 0.4,
        ],
        [
            'label' => 'Revenue 2024',
            'data' => [3100, 3800, 4200, 5100, 5800, 6200],
            'borderColor' => '#94a3b8',
            'backgroundColor' => 'transparent',
            'borderDash' => [5, 5],
            'tension' => 0.4,
        ],
    ]"
    height="350px"
/>

User Analytics Bar Chart

<x-aura::chart
    type="bar"
    :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
    :datasets="[
        [
            'label' => 'New Users',
            'data' => [65, 59, 80, 81, 56, 40, 35],
            'backgroundColor' => '#6366f1',
        ],
        [
            'label' => 'Returning Users',
            'data' => [28, 48, 40, 19, 36, 27, 20],
            'backgroundColor' => '#a5b4fc',
        ],
    ]"
    :options="[
        'plugins' => ['legend' => ['position' => 'bottom']],
        'scales' => ['y' => ['beginAtZero' => true]],
    ]"
/>

Pie Chart

<x-aura::chart
    type="pie"
    :labels="['Desktop', 'Mobile', 'Tablet']"
    :datasets="[
        [
            'data' => [62, 30, 8],
            'backgroundColor' => ['#6366f1', '#ec4899', '#f59e0b'],
        ],
    ]"
    :options="[
        'plugins' => ['legend' => ['position' => 'right']],
    ]"
/>

Doughnut Chart

<x-aura::chart
    type="doughnut"
    :labels="['Completed', 'In Progress', 'Pending', 'Cancelled']"
    :datasets="[
        [
            'data' => [45, 25, 20, 10],
            'backgroundColor' => ['#22c55e', '#3b82f6', '#f59e0b', '#ef4444'],
        ],
    ]"
/>

Livewire Dynamic Chart

<!-- Blade view -->
<div>
    <div class="mb-4 flex gap-2">
        <x-aura::button wire:click="setPeriod('week')" size="sm">Week</x-aura::button>
        <x-aura::button wire:click="setPeriod('month')" size="sm">Month</x-aura::button>
        <x-aura::button wire:click="setPeriod('year')" size="sm">Year</x-aura::button>
    </div>

    <x-aura::chart
        type="area"
        :labels="$chartData['labels']"
        :datasets="$chartData['datasets']"
        height="350px"
        wire:key="chart-{{ $period }}"
    />
</div>

// Livewire component
class RevenueChart extends Component
{
    public string $period = 'month';
    public array $chartData = [];

    public function mount(): void
    {
        $this->loadChartData();
    }

    public function setPeriod(string $period): void
    {
        $this->period = $period;
        $this->loadChartData();
    }

    private function loadChartData(): void
    {
        $stats = Order::getRevenueStats($this->period);

        $this->chartData = [
            'labels' => $stats->pluck('label')->toArray(),
            'datasets' => [
                [
                    'label' => 'Revenue',
                    'data' => $stats->pluck('total')->toArray(),
                    'borderColor' => '#6366f1',
                    'backgroundColor' => 'rgba(99, 102, 241, 0.15)',
                    'fill' => true,
                    'tension' => 0.3,
                ],
            ],
        ];
    }
}

Slots

Slot Description
default Not used. The chart is rendered entirely from props via Chart.js canvas.

Accessibility

  • Color choices should maintain sufficient contrast; the component does not enforce this.
  • For data tables as an accessible alternative, pair the chart with a visually hidden <table> or use the <x-aura::data-table> component alongside it.
  • Tooltips displayed on hover are not accessible to keyboard users; include a summary or data table for full accessibility.