Updating chart data not working

[maltebaer]

Hey, I have problems with updating the chart data. I change the data outside of my chart component and use Livewire's Reactive attribute to trigger the update. However, nothing happens. This is my setup:

<?php

namespace App\Livewire;

use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;
use Livewire\Attributes\Reactive;

class FooChart extends ApexChartWidget
{
    #[Reactive]
    public array $data = [];

    protected function getOptions(): array
    {
        return [
            'chart' => [
                'type' => 'line',
                'height' => 300,
            ],
            'series' => [
                [
                    'name' => 'BasicLineChart',
                    'data' => $this->data,
                ],
            ],
        ];
    }
}

I've checked the source code of Filaments ChartWidget and noticed a rendering() method that is missing in ApexChartWidget. If we add that, updating works as expected:

# vendor/leandrocfe/filament-apex-charts/src/Widgets/ApexChartWidget.php

/**
 * Updates the options of the class and emits an event if the options have changed.
 */
public function updateOptions(): void
{
    if ($this->options !== $this->getOptions()) {

        $this->options = $this->getOptions();

        if (!$this->dropdownOpen) {
            $this
                ->dispatch('updateOptions', options: $this->options)
                ->self();
        }
    }
}

public function rendering(): void
{
    $this->updateOptions();
}

[leandrocfe]

You can use the same method in the FooChart class

[maltebaer]

Yes, you are right. Calling

public function rendering(): void
{
    $this->updateOptions();
}

from within FooChart does solve the issue.

Maybe we should add that to the documentation? Or am I misusing the widget? Is there a better way to do this sort of updating?

[sandermanneke]

@leandrocfe I have a similar issue for I am using the native filter form for Filament https://filamentphp.com/docs/3.x/panels/dashboard#filtering-widget-data

When changing the filter form the widget do not update, I only see it updated on the poll.

I am new to Livewire so I am little lost, how would I have to change the FooChart in the above example to listen to the native Filament filter for dashboards?

[sandermanneke]

For anyone looking for the same issue, adding this to your widget makes the chart listen to the default filter in Filament also.

public function rendering(): void { $this->updateOptions(); }

Perhaps you should include it by default @leandrocfe as I don't see a downside ?

[kinjal1298]

For anyone looking for the same issue, adding this to your widget makes the chart listen to the default filter in Filament also.

public function rendering(): void { $this->updateOptions(); }

Perhaps you should include it by default @leandrocfe as I don't see a downside ?

Thanks for sharing! I faced the same problem and spent a lot of time updating the chart. The default setting should actually be there.