F
Filament•10mo ago
Dushmanta

Is there anyway we can specify how many rows a widget takes? (or group widgets to apply grid)

So I'm making a page with 3 widgets, as you can see in the picture. Here I want both column charts to be stacked on each other, taking 6 columns and the rest of the 6 columns would be taken by the pie chart, while the height of both column charts widgets stacked on each other should be the same as the height of the pie chart widget. Could anyone help here? Thank you.anyone
No description
2 Replies
LeandroFerreira
LeandroFerreira•10mo ago
- Create a custom widget https://filamentphp.com/docs/3.x/panels/dashboard#custom-widgets - Create two livewire components and extend ApexChartWidget 
namespace App\Livewire;

use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class Chart1 extends ApexChartWidget
{
    protected static ?string $chartId = 'chart1';

    protected function getOptions(): array
    {
        return [
            ...
        ];
    }
}
namespace App\Livewire;

use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class Chart1 extends ApexChartWidget
{
    protected static ?string $chartId = 'chart1';

    protected function getOptions(): array
    {
        return [
            ...
        ];
    }
}
namespace App\Livewire;

use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class Chart2 extends ApexChartWidget
{
    protected static ?string $chartId = 'chart2';

    protected function getOptions(): array
    {
        return [
            ...
        ];
    }
}
namespace App\Livewire;

use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class Chart2 extends ApexChartWidget
{
    protected static ?string $chartId = 'chart2';

    protected function getOptions(): array
    {
        return [
            ...
        ];
    }
}
- Use the widget to render the livewire components 
<x-filament-widgets::widget>
    <x-filament::section>
        @livewire('chart1')
        @livewire('chart2')
    </x-filament::section>
</x-filament-widgets::widget>
<x-filament-widgets::widget>
    <x-filament::section>
        @livewire('chart1')
        @livewire('chart2')
    </x-filament::section>
</x-filament-widgets::widget>
Dashboard - Panel Builder - Filament
Dushmanta
DushmantaOP•10mo ago
Thank you for the detailed insight, btw I'm using your plugin for the column charts, it's so cool 🙂

Did you find this page helpful?