Chart widget not showing until page refresh
Hi, hope someone can help.
I have a laravel app with livewire and filament. I have created a new livewire component page called Offers. This offers page has a small filament ChartWidget component within it called OfferChart.
When I first load the Offers page, the chart within the OfferChart component does not load. The component itself is visible as white space on the page, but the chart within it is not visible.
When I refresh the page manually using the browser refresh button, the chart appears, and stays there. Any ideas why the chart does not appear on first render?
For information:
The Offers livewire page which inserts a livewire component with:
@livewire(\App\Livewire\OfferChart::class)
The OfferChart component is very simple:
<?php
namespace App\Livewire;
use Filament\Widgets\ChartWidget;
use carbon\Carbon;
class OfferChart extends ChartWidget
{
protected static ?string $maxHeight = '200px';
protected static string $color = 'success';
protected function getData(): array
{
return [
'datasets' => [
[
'label' => 'Number Offered',
'data' => [1,2,3],
],
],
'labels' => [1,2,3],
];
}
protected function getType(): string
{
return 'bar';
}
}
I have a laravel app with livewire and filament. I have created a new livewire component page called Offers. This offers page has a small filament ChartWidget component within it called OfferChart.
When I first load the Offers page, the chart within the OfferChart component does not load. The component itself is visible as white space on the page, but the chart within it is not visible.
When I refresh the page manually using the browser refresh button, the chart appears, and stays there. Any ideas why the chart does not appear on first render?
For information:
The Offers livewire page which inserts a livewire component with:
@livewire(\App\Livewire\OfferChart::class)
The OfferChart component is very simple:
<?php
namespace App\Livewire;
use Filament\Widgets\ChartWidget;
use carbon\Carbon;
class OfferChart extends ChartWidget
{
protected static ?string $maxHeight = '200px';
protected static string $color = 'success';
protected function getData(): array
{
return [
'datasets' => [
[
'label' => 'Number Offered',
'data' => [1,2,3],
],
],
'labels' => [1,2,3],
];
}
protected function getType(): string
{
return 'bar';
}
}
