Livewire Charts and Graphs

public function getChartData()
{
    return [
        'labels' => ['Jan', 'Feb', 'Mar'],
        'data' => [10, 20, 30],
    ];
}

<canvas x-data x-init="
    new Chart($el, {
        type: 'line',
        data: {
            labels: @js($this->getChartData()['labels']),
            datasets: [{
                data: @js($this->getChartData()['data'])
            }]
        }
    })
"></canvas>

<div wire:ignore>
    <canvas x-ref="chart"></canvas>
</div>

@script
<script>
    $wire.on('chart-updated', (data) => {
        chart.data.datasets[0].data = data;
        chart.update();
    });
</script>
@endscript