Chart Widget Height

[chaseconey]

Package

Widgets

Package Version

v4.1.10

How can we help you?

Hello there 👋 .

I am going through the upgrade process from v3 => v4. One thing I am struggling with is that our chart widgets all seem to have lost their height and are squished together massively. I am not seeing any way to force a height easily.

Is there a recommended approach to fixing this issue?

Thanks

[leandrocfe]

Could you share a screenshot?
Are you using plugins in this project?

[chaseconey]

Certainly.

Here is a before and after with no changes to the widgets or chartjs options:

Before

After

Not sure what you mean by "plugins" in this case.

[leandrocfe]

I mean any Filament plugins, because plugins can override css

try this

protected function getOptions(): array|RawJs|null
{
    return [
        'maintainAspectRatio' => true,
    ];
}

[chaseconey]

I had tried this previously and it didn't have any affect, sadly.

[chaseconey]

Actually, apologies...I had seen setting that to false in a few places as a fix - not to true.

That does actually seem to do it! Thank you so much @leandrocfe!

[chaseconey]

Ok it didn't fully fix it actually. The chart's width is now off (which makes sense). Having a hard time understanding why the behavior is so different from previous. Guessing it has something to do with the changes in how things are rendered in v4.

Here is what it looks like now:

[chaseconey]

The v3 version seems to be responsive by default as well (not from a ChartJS perspective, but just in how it is rendered).

[leandrocfe]

Could you list the Filament plugins that are you using in this app?

[chaseconey]

For sure - only a couple:

• malzariey/filament-daterangepicker-filter
• althinect/filament-spatie-roles-permissions

[Syzgyn]

@chaseconey I was able to fix this by changing the aspect ratio. For me, this did the trick:

    protected ?array $options = [
        'aspectRatio' => 1,
    ];

[chaseconey]

Yes! This did it - thank you so much!

For any other trying to find the right combo - you can't have 'maintainAspectRatio' => true,, only the aspectRatio option like demonstrated above.