Bar Chart

@php
    $visitors = [
        ['month' => 'Jan', 'desktop' => 186, 'mobile' => 80],
        ['month' => 'Feb', 'desktop' => 305, 'mobile' => 200],
        ['month' => 'Mar', 'desktop' => 237, 'mobile' => 120],
        ['month' => 'Apr', 'desktop' => 73, 'mobile' => 190],
        ['month' => 'May', 'desktop' => 209, 'mobile' => 130],
        ['month' => 'Jun', 'desktop' => 214, 'mobile' => 140],
    ];
@endphp

<div class="w-full max-w-xl rounded-xl border border-border bg-background p-5">
    <p class="font-medium text-foreground">Monthly visitors</p>
    <p class="text-sm text-muted-foreground">January – June 2026</p>

    <x-ui.chart :data="$visitors" index="month" label="Monthly visitors" class="mt-5 h-64" :config="[
        'desktop' => ['label' => 'Desktop', 'color' => 'var(--chart-1)'],
        'mobile' => ['label' => 'Mobile', 'color' => 'var(--chart-2)'],
    ]" />
</div>

@php
    $signups = [
        ['week' => 'W1', 'organic' => 120, 'referral' => 45, 'paid' => 30],
        ['week' => 'W2', 'organic' => 132, 'referral' => 60, 'paid' => 42],
        ['week' => 'W3', 'organic' => 101, 'referral' => 72, 'paid' => 55],
        ['week' => 'W4', 'organic' => 154, 'referral' => 66, 'paid' => 48],
        ['week' => 'W5', 'organic' => 190, 'referral' => 81, 'paid' => 62],
        ['week' => 'W6', 'organic' => 176, 'referral' => 94, 'paid' => 70],
    ];
@endphp

<x-ui.chart :data="$signups" index="week" stacked label="Weekly sign-ups by channel" class="h-64 w-full max-w-xl" :config="[
    'organic' => ['label' => 'Organic'],
    'referral' => ['label' => 'Referral'],
    'paid' => ['label' => 'Paid'],
]" />

@php
    $pages = [
        ['page' => '/pricing', 'views' => 4820],
        ['page' => '/docs/installation', 'views' => 3960],
        ['page' => '/blocks', 'views' => 3120],
        ['page' => '/components/button', 'views' => 2270],
        ['page' => '/changelog', 'views' => 1480],
    ];
@endphp

<x-ui.chart horizontal :data="$pages" index="page" label="Most viewed pages" class="h-72 w-full max-w-xl" :config="[
    'views' => ['label' => 'Views', 'color' => 'var(--chart-1)'],
]" />

@php
    $cashflow = [
        ['month' => 'Jan', 'net' => 4200],
        ['month' => 'Feb', 'net' => -1800],
        ['month' => 'Mar', 'net' => 2600],
        ['month' => 'Apr', 'net' => -3100],
        ['month' => 'May', 'net' => 5400],
        ['month' => 'Jun', 'net' => 1200],
    ];
@endphp

<x-ui.chart :data="$cashflow" index="month" prefix="€" label="Net cash flow" class="h-64 w-full max-w-xl" :config="[
    'net' => ['label' => 'Net cash flow', 'color' => 'var(--chart-3)'],
]" />

@php
    $revenue = [
        ['month' => 'Jan', 'revenue' => 12400, 'target' => 11000],
        ['month' => 'Feb', 'revenue' => 13900, 'target' => 12000],
        ['month' => 'Mar', 'revenue' => 11800, 'target' => 13000],
        ['month' => 'Apr', 'revenue' => 16200, 'target' => 14000],
        ['month' => 'May', 'revenue' => 17800, 'target' => 15000],
        ['month' => 'Jun', 'revenue' => 19400, 'target' => 16000],
    ];
@endphp

<x-ui.chart :data="$revenue" index="month" prefix="€" label="Revenue against target" class="h-64 w-full max-w-xl" :config="[
    'revenue' => ['label' => 'Revenue', 'color' => 'var(--chart-1)'],
    'target' => ['label' => 'Target', 'color' => 'var(--chart-2)'],
]">
    <x-ui.chart.grid />
    <x-ui.chart.y-axis class="text-[11px]" />
    <x-ui.chart.x-axis />
    <x-ui.chart.bar only="revenue" :radius="8" :gap="0.45" />
    <x-ui.chart.line only="target" curve="linear" :dots="false" :stroke-width="2.5" />
    <x-ui.chart.tooltip />
</x-ui.chart>