Bar

@php
    $revenue = [
        ['month' => 'Jan', 'revenue' => 12400],
        ['month' => 'Feb', 'revenue' => 13900],
        ['month' => 'Mar', 'revenue' => 11800],
        ['month' => 'Apr', 'revenue' => 16200],
        ['month' => 'May', 'revenue' => 17800],
        ['month' => 'Jun', 'revenue' => 19400],
    ];
@endphp

<x-ui.echart type="bar" :data="$revenue" index="month" prefix="€" label="Monthly revenue" class="h-72 w-full"
    :config="['revenue' => ['label' => 'Revenue']]" />

@php
    $regions = [
        ['region' => 'Europe', 'solo' => 412, 'lifetime' => 268, 'team' => 96],
        ['region' => 'North America', 'solo' => 380, 'lifetime' => 301, 'team' => 122],
        ['region' => 'Africa', 'solo' => 214, 'lifetime' => 96, 'team' => 31],
        ['region' => 'Asia', 'solo' => 290, 'lifetime' => 174, 'team' => 58],
        ['region' => 'South America', 'solo' => 132, 'lifetime' => 71, 'team' => 19],
    ];
@endphp

<x-ui.echart type="bar" horizontal stacked :data="$regions" index="region" label="Customers by region and plan" class="h-80 w-full" :config="[
    'solo' => ['label' => 'Solo'],
    'lifetime' => ['label' => 'Solo Lifetime'],
    'team' => ['label' => 'Team Lifetime'],
]" />

@php
    // Six months of daily orders on a time axis: zoom in on any week.
    $days = collect(range(0, 181))->map(fn (int $i) => [
        'date' => now()->subDays(182 - $i)->format('Y-m-d'),
        'orders' => (int) round(60 + $i * 0.3 + 22 * sin($i / 7) + ($i % 7 === 5 ? 35 : 0)),
    ])->all();
@endphp

<x-ui.echart type="bar" datetime zoom :data="$days" index="date" label="Daily orders" class="h-80 w-full"
    :config="['orders' => ['label' => 'Orders']]" />