Filament•9mo ago

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

2 Replies

LeandroFerreira•9mo 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

DushmantaOP•9mo ago

Thank you for the detailed insight, btw I'm using your plugin for the column charts, it's so cool 🙂

Gaming

Programming

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