@props([
    // Chart.js config as a PHP array. Colours may use "token:accent" /
    // "token:accent/0.12" strings, resolved from CSS design tokens at runtime.
    'config',
    'label' => null,
    // Optional: the name of a browser event carrying fresh data for this chart.
    //
    // Charts sit under wire:ignore — otherwise Livewire destroys the canvas on
    // every render — so no amount of polling reaches them, and a live page
    // would refresh the figures beside the chart while the curve stood still.
    // With this set, the component swaps labels and datasets INSIDE the
    // existing Chart.js instance instead. Livewire feeds it with
    // $this->dispatch('<name>', labels: [...], datasets: [[...], [...]]).
    'updateOn' => null,
])
<div
    x-data="chart(@js($config), @js($updateOn))"
    @if ($label) role="img" aria-label="{{ $label }}" @endif
    {{ $attributes->merge(['class' => 'relative']) }}
>
    <canvas x-ref="canvas"></canvas>
</div>