Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

LaCoder's avatar

Update component JS for chart when component refresh\re-render

Hello, I am using ApexChart and added that in the Livewire component,

   <select class="form-select form-select-solid" aria-label="Select example" wire:model.change="expiry">
                <option>Select Expiry</option>
                <option value="2024-03-28">2024-03-28</option>
                <option value="2024-04-25">2024-04-25</option>
    </select>

    <div class="card-body" id="chart">
			--This is chart
    </div>

@push('scripts')
        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
@endpush

When the page loads, the component loads and I can see a chart with correct data. So far all good.

Now, I have select option in the component and based on the selected value, data are being queried in DB and I get the correct data,

I can see the component getting refreshed, but I don't see any updates in chart data, and even console.log() doesn't print anything, so it looks like the script inside the component doesn't reactivate.

So how to refresh scripts which are inside livewire component itself?

0 likes
0 replies

Please or to participate in this conversation.