refactor: chart widget chart.js implementation

[ahmed-rashad-alnaggar]

Hi, this PR is focused on improving performance of the chart.js implementation by not destroying and re-initializing the chart on every event, and also improve animating chart by removing the default animation.duration = 0 as this should not be the default case as the charts should animate to introduce a beautiful data visualization, handled missing or miss configured parts while initializing the chart, for example in the discussion #19609 with @danharrin I understood that the desired behavior is to rely on ResizeObserver not chart responsiveness options, but actually the old implementation was still relies on it by not setting options.responsive to false so the chart was resized and calculations are done by many "providers".
English is not my native language so i used AI to generate a well detailed description of the changes, rather than that I spent hours developing (only the updateChartData function is AI driven) and testing the code with all the possibilities to guarantee it is working (going from no data to data and vice versa with applying different cases like resizing). now the chart is animated when initialized for the first time or by updating data (not by a reset ugly animation but by a beautiful update and data changed animation). also the performance has significantly improved.

START OF AI DESCRIPTION

Overview

This PR refactors the Filament Chart Widget's Alpine.js component and its companion Blade template. The primary goals are:

• Eliminate unnecessary Chart destroy/recreate cycles on resize and theme changes, replacing them with targeted, in-place updates.
• Extract cohesive methods (updateChartData, updateChartTheme, getChartFallbackColors, whenChart) to reduce duplication and improve readability.
• Stop mutating global Chart.defaults for per-instance concerns (colors, font), scoping those values to individual chart options instead.
• Remove the maxHeight prop from the JS component API, detecting it from the canvas element's own style at runtime.
• Use @style directive to apply width, height and max-height css properties so the chart can animate properly.

END OF AI DESCRIPTION

Feel free to ask any question!

[People-Sea]

2026-04-08.00.38.10.mov

@ahmed-rashad-alnaggar
Hi, could you test this scenario too? Opening a right-side slide-over sometimes distorts the Doughnut Chart, and the other charts resize a bit late. I attached a screen recording.

[ahmed-rashad-alnaggar]

@People-Sea
Of course! Can you please provide a reproduction repo or just each chart settings?

[People-Sea]

@ahmed-rashad-alnaggar https://github.com/People-Sea/test

[ahmed-rashad-alnaggar]

Fixed!
The cause of only one to resize is splitting observing the element from creating the observer, something with alpine I guess.
And for the delay in resizing, it was due to the debounce, actually I left it as it is as the old implementation does, as I thought it could be to mitigate a bug or something, but after removing it and testing, everything is actually works very well!
@People-Sea can you test it now?