Line Chart

@php
    $traffic = [
        ['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">Traffic</p>
    <p class="text-sm text-muted-foreground">Sessions per month, by device</p>

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

@php
    $downloads = collect(range(1, 12))->map(fn (int $month) => [
        'month' => date('M', mktime(0, 0, 0, $month, 1)),
        'free' => 1800 + $month * 420 + ($month % 3) * 260,
        'pro' => 300 + $month * 190 + ($month % 4) * 120,
    ])->all();
@endphp

<x-ui.chart type="area" :data="$downloads" index="month" label="Downloads per month" class="h-64 w-full max-w-xl" :config="[
    'free' => ['label' => 'Free', 'color' => 'var(--chart-1)'],
    'pro' => ['label' => 'Pro', 'color' => 'var(--chart-2)'],
]" />

@php
    $uptime = [
        ['day' => 'Mon', 'latency' => 182],
        ['day' => 'Tue', 'latency' => 195],
        ['day' => 'Wed', 'latency' => 240],
        ['day' => 'Thu', 'latency' => null],
        ['day' => 'Fri', 'latency' => 176],
        ['day' => 'Sat', 'latency' => 158],
        ['day' => 'Sun', 'latency' => 164],
    ];
@endphp

{{-- `null` breaks the line: no value is made up for Thursday. --}}
<x-ui.chart type="line" curve="linear" :data="$uptime" index="day" suffix=" ms" format="number" label="API latency" class="h-56 w-full max-w-xl" :config="[
    'latency' => ['label' => 'p95 latency', 'color' => 'var(--chart-2)'],
]" />