Livewire (polling) Apexcharts chart disappearing

I have a page with various statistics and important information which needs to be refreshed regularly. Currently looking at an interval anywhere near 1-5 minutes.

The data is refreshed using wire:poll.60s currently but as soon as it refreshes the component with the chart, the chart disappears. There are no errors (no errors in the console tab of the browser too). Updating the labels works fine but as soon as I try to update the data using updateSeries() the chart just disappears.

I tried setting wire:ignore, wire:key on multiple different elements.

HTML

        <div id="{!! $chartId !!}"></div>

<script type="module">
        (function () {
            const options = {
                chart: {
                    id: `{!! $chartId !!}`,
                    type: "donut",
                },
                series: {{$seriesData}},
                labels: {!! $categories !!},
                colors: ["#5e8ef6", "#d75bae", "#f97316"],
                legend: {
                    show: false,
                }
            };
            const chart = new ApexCharts(document.getElementById(`{!! $chartId !!}`), options);
            chart.render();

            window.Livewire.on(`refreshChartData-{!! $chartId !!}`, () => {
                chart.updateOptions({
                    labels: {!! $categories !!},
                });
                chart.updateSeries([{
                    data: {{$seriesData}},
                }]);
            });
        }());     					
</script>

PHP

public function render(){
		$online = rand(0,20);
        $offline = rand(1,5);
        $overdue = rand(0,10);

        $this->seriesData = json_encode([$online, $offline, $overdue]);
        $this->categories = json_encode(['Online', 'Offline', 'Overdue']);

        $this->emit("refreshChartData-{$this->chartId}", [
            'seriesData' => $this->seriesData,
            'categories' => $this->categories,
        ]);
		return view() ....
}

LaryAI

2 years ago

Level 58

The issue with the chart disappearing after refreshing the data using updateSeries() is likely due to the Livewire component being re-rendered and the chart not being re-initialized properly.

To fix this issue, you can modify your Livewire component's PHP code to include a unique key for the chart component. This will force Livewire to re-render the chart component when the key changes, ensuring that the chart is re-initialized properly.

Here's an example of how you can modify your PHP code:

public $chartKey = 0;

public function render()
{
    $online = rand(0, 20);
    $offline = rand(1, 5);
    $overdue = rand(0, 10);

    $this->seriesData = json_encode([$online, $offline, $overdue]);
    $this->categories = json_encode(['Online', 'Offline', 'Overdue']);

    $this->emit("refreshChartData-{$this->chartId}", [
        'seriesData' => $this->seriesData,
        'categories' => $this->categories,
    ]);

    return view('livewire.chart-component', [
        'chartKey' => $this->chartKey,
    ]);
}

Then, in your Livewire component's blade file (chart-component.blade.php), you can add the wire:key directive to the chart container div:

<div id="{!! $chartId !!}" wire:key="chart-{{ $chartKey }}"></div>

By adding the wire:key directive with a unique value (chart-{{ $chartKey }}), Livewire will re-render the chart component whenever the key changes, ensuring that the chart is re-initialized properly.

Remember to update your JavaScript code to listen for the refreshChartData-{!! $chartId !!} event and update the chart accordingly.

This should fix the issue with the chart disappearing after refreshing the data.

Snapey

2 years ago

Level 122

I have a similar setup, but with wire:ignore on the div containing the chart.

Its not necessary for Livewire to re-render the chart, just tell the chart to update itself and provide new data (as you do)

Nick-

2 years ago

Level 9

@Snapey I have tried that, including adding a parent div around the chart with wire:ignore but still the chart just disappears. When I disable updating the data but do update labels the chart is working as expected and updates it's labels. (I don't even need to update the labels as they will never change , so that will be removed). I feel like there's something wrong with updating the series data. I would expect Apexcharts to error out but nothing.

Snapey

2 years ago

Level 122

@Nick- examine the data closely. I can assure you, it can work

I assume you have no javascript errors in the console?

Please or to participate in this conversation.