Candlestick

@php
    $week = [
        ['day' => 'Mon', 'open' => 182.1, 'close' => 184.6, 'low' => 181.2, 'high' => 185.4],
        ['day' => 'Tue', 'open' => 184.6, 'close' => 183.0, 'low' => 182.3, 'high' => 186.1],
        ['day' => 'Wed', 'open' => 183.0, 'close' => 187.9, 'low' => 182.8, 'high' => 188.5],
        ['day' => 'Thu', 'open' => 187.9, 'close' => 186.2, 'low' => 185.1, 'high' => 189.0],
        ['day' => 'Fri', 'open' => 186.2, 'close' => 190.4, 'low' => 185.9, 'high' => 191.2],
    ];
@endphp

<x-ui.echart type="candlestick" :data="$week" index="day" prefix="$" format="number" label="Share price this week" class="h-72 w-full" />

@php
    $price = 182.0;
    $days = collect(range(0, 39))->map(function (int $i) use (&$price) {
        $open = $price;
        $close = round($open + sin($i / 3) * 4 + cos($i * 1.7) * 2.5, 2);
        $price = $close;

        return [
            'date' => now()->subDays(40 - $i)->format('M j'),
            'open' => $open,
            'close' => $close,
            'low' => round(min($open, $close) - 1.5 - ($i % 4), 2),
            'high' => round(max($open, $close) + 1.2 + ($i % 3), 2),
        ];
    })->all();
@endphp

{{-- Candlestick reads the open, close, low and high columns. --}}
<x-ui.echart type="candlestick" zoom :data="$days" index="date" prefix="$" format="number" label="Share price, last 40 days" class="h-80 w-full" />