Building Charts with Livewire v4

Integrate Chart.js with Livewire.

1 min readLivewireاقرأ بالعربية

Build dynamic charts.

Component

blade
<div 
    wire:ignore
    x-data="{ 
        chart: null,
        init() {
            this.chart = new Chart(this.$refs.canvas, {
                type: 'line',
                data: $wire.chartData
            });
        }
    }"
    x-init="init()"
    @chart-updated.window="chart.data = $event.detail; chart.update()">
    <canvas x-ref="canvas"></canvas>
</div>

Update Chart

php
$this->dispatch('chart-updated', $newData);
All articles

Keep reading