v4 Charts not updating when in non-active tabs

[binaryfire]

Package

filament/filament

Package Version

4-beta6

Laravel Version

12

Livewire Version

3

PHP Version

8.4

Problem description

Not sure if I'm doing something wrong, but I can't get charts in nested non-active tabs to render properly on page load, or update properly. The video shows the problem using the reproduction repo.

I'm using this to render the chart in 3 places:

Livewire::make(StatChartWidget::class, fn ($record) => [
        'record' => $record,
    ])
    ->key(Str::random(10))

In the video, the following happens:

1. Page load

• Chart in the body loads ✅
• Chart in the visible tab loads ✅
• Chart in the non-visible nested "Data" tab is empty ❌

2. "Refresh data" to update the model's data attribute while the 'Data' tab is not active

• Chart in the body refreshes ✅
• Chart in the visible tab refreshes ✅
• Chart in the non-visible nested "Data" tab is not refreshed ❌

2. "Refresh data" to update the model's data attribute while the 'Data' tab is active

• Chart in the body refreshes ✅
• Chart in the visible tab refreshes ✅
• Chart in the non-visible nested "Data" tab refreshes ✅

I'm using #[Reactive] but I also tried refreshing via an event, and tried ->lazy(). Neither helped.

1080p_WVyR.mp4

Expected behavior

Charts / Livewire components in a page should render and update correctly regardless of what tab they're in.

Steps to reproduce

1. Clone repo
2. Run migrate:fresh --seed to seed statistics table
3. Go to Statistics resource
4. See video and steps outlined in description to reproduce

Reproduction repository (issue will be closed if this is not valid)

https://github.com/binaryfire/filament-bug-reproduction

Relevant log output

[danharrin]

This is a weird one. The data does seem to update correctly for me, but they don't render at full width.

[binaryfire]

@danharrin This is still happening for me, but looks like it might be more of a frontend issue because resizing the browser populates the chart..? I'm on a 4K monitor. Steps to reproduce (see video below):

1. Load page on a different tab to the chart
2. Switch to the chart tab. Chart is empty
3. Resize the browser (up or down). Chart gets populated

The chart width is also wrong when there's no data, then goes full-width after the browser resize. If I reload the browser window with the chart tab selected, the chart is populated correctly from the start.

Video:
https://github.com/user-attachments/assets/97213229-6f13-40a5-9c6e-67ff7a1bf62e

[binaryfire]

I've had other issues with chart width in tabs. Sometimes, even when data is populated correctly, the chart will shrink / expand in slow motion after the tab is selected. I was going to open a separate issue for that but I'll wait till this one is resolved. It might fix that too.

[danharrin]

Maybe Chart.js has trouble rendering if it is hidden. Maybe we could reinitialise it when it enters the viewport again, maybe IntersectionObserver would run when the tab is opened?