Phara UI v2.x
Login

Chart

A Chart.js-powered component supporting line, area, bar, doughnut, and more. Fully dark-mode aware, responsive, and Livewire-compatible.

Line

A smooth line chart. Pass :smooth="false" for straight segments.

Blade 
<x-ui::chart
    type="line"
    :labels="['Jan','Feb','Mar','Apr','May','Jun']"
    :datasets="[
        ['label' => 'Visitors', 'data' => [12400, 15200, 11800, 18600, 17200, 22100]],
    ]"
/>
Area

Filled area beneath the line — great for cumulative or volume metrics.

Blade 
<x-ui::chart
    type="area"
    :labels="$months"
    :datasets="[
        ['label' => 'Page Views', 'data' => $pageViews],
    ]"
    y-suffix="k"
/>
Multi-series

Multiple datasets on the same axes. A legend is shown automatically when there is more than one series.

Visitors
Sign-ups
Blade 
<x-ui::chart
    type="line"
    :labels="$months"
    :datasets="[
        ['label' => 'Visitors', 'data' => $visitors],
        ['label' => 'Sign-ups', 'data' => $signups],
    ]"
/>
Bar

Grouped bars for side-by-side comparison. Bar tops are rounded by default.

Page Views
Sessions
Blade 
<x-ui::chart
    type="bar"
    :labels="$weekDays"
    :datasets="[
        ['label' => 'Page Views', 'data' => $pageViews],
        ['label' => 'Sessions',   'data' => $sessions],
    ]"
/>
Stacked Bar

Add stacked to stack datasets on top of each other — ideal for showing part-to-whole relationships over time.

Product A
Product B
Product C
Blade 
<x-ui::chart
    type="bar"
    :labels="$quarterLabels"
    :datasets="[
        ['label' => 'Product A', 'data' => $prodA],
        ['label' => 'Product B', 'data' => $prodB],
        ['label' => 'Product C', 'data' => $prodC],
    ]"
    stacked
    y-prefix="$"
/>
Horizontal Bar

Use type="bar-horizontal" to flip the axes — works well for ranked or labelled data with long category names.

Blade 
<x-ui::chart
    type="bar-horizontal"
    :labels="['Direct','Organic','Social','Email','Referral']"
    :datasets="[
        ['label' => 'Traffic share %', 'data' => [34, 28, 18, 12, 8]],
    ]"
    y-suffix="%"
    :show-grid="false"
/>
Doughnut

A doughnut (or pie) chart for proportional breakdowns. The legend shows each segment label with its colour.

Direct
Organic Search
Social Media
Email
Referral
Blade 
<x-ui::chart
    type="doughnut"
    :labels="['Direct','Organic Search','Social Media','Email','Referral']"
    :datasets="[
        ['label' => 'Traffic', 'data' => [34, 28, 18, 12, 8]],
    ]"
    height="260px"
/>
Livewire

Computed data re-renders the chart when a Livewire property changes. Switch the period buttons below — the chart and labels update instantly.

Revenue
Costs
PHP 
// Livewire component
public string $period = '7d';

#[Computed]
public function revenueData(): array
{
    return [
        'labels'  => [...],
        'revenue' => [...],
        'costs'   => [...],
    ];
}

// Template
<div class="flex gap-2 mb-4">
    <x-ui::button wire:click="$set('period','7d')"  size="sm" :variant="$period === '7d'  ? 'primary' : 'ghost'">7d</x-ui::button>
    <x-ui::button wire:click="$set('period','30d')" size="sm" :variant="$period === '30d' ? 'primary' : 'ghost'">30d</x-ui::button>
    <x-ui::button wire:click="$set('period','90d')" size="sm" :variant="$period === '90d' ? 'primary' : 'ghost'">90d</x-ui::button>
</div>

<x-ui::chart
    type="area"
    :labels="$this->revenueData['labels']"
    :datasets="[
        ['label' => 'Revenue', 'data' => $this->revenueData['revenue']],
        ['label' => 'Costs',   'data' => $this->revenueData['costs']],
    ]"
    y-prefix="$"
/>