Apex chart squashed in mobile view

[LemonPie22]

Using Filament v3.2.15 with the Apex charts plugin v3.1.2, my stacked bar chart is coming out squashed almost flat on a mobile phone.

My code:

<?php

namespace App\Filament\Widgets;

use App\Models\Quote;
use Illuminate\Support\Carbon;
use Filament\Forms\Components\DatePicker;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;
use Flowframe\Trend\Trend;
use Flowframe\Trend\TrendValue;

class QuotesChart extends ApexChartWidget
{
    /**
     * Chart Id
     *
     * @var string
     */
    protected static ?string $chartId = 'quotesChart';

    /**
     * Widget Title
     *
     * @var string|null
     */
    protected static ?string $heading = 'Quotes';

    // Set to full width
    protected int | string | array $columnSpan = 'full';

    // Filter options
    protected function getFormSchema(): array
    {
        return [

            DatePicker::make('date_start')
                ->default(now()->subRealMonths(6)),
            DatePicker::make('date_end')
                ->default(now()),
        ];
    }

    /**
     * Chart options (series, labels, types, size, animations...)
     * https://apexcharts.com/docs/options
     *
     * @return array
     */
    protected function getOptions(): array
    {
        $dateStart = Carbon::parse($this->filterFormData['date_start']);
        $dateEnd = Carbon::parse($this->filterFormData['date_end']);

        $yAxis = Trend::model(Quote::class)
            ->between(
                start: $dateStart,
                end: $dateEnd,
            )
            ->perMonth()
            ->count();

        //@TODO Sort out code repetition below. No need for separate block for each status

        $declined = Trend::query(Quote::query()->where('status', 'declined'))
            ->between(
                start: $dateStart,
                end: $dateEnd,
            )
            ->perMonth()
            ->count();

        $draft = Trend::query(Quote::query()->where('status', 'draft'))
            ->between(
                start: $dateStart,
                end: $dateEnd,
            )
            ->perMonth()
            ->count();

        $published = Trend::query(Quote::query()->where('status', 'published'))
            ->between(
                start: $dateStart,
                end: $dateEnd,
            )
            ->perMonth()
            ->count();

        $review = Trend::query(Quote::query()->where('status', 'review'))
            ->between(
                start: $dateStart,
                end: $dateEnd,
            )
            ->perMonth()
            ->count();

        $accepted = Trend::query(Quote::query()->where('status', 'accepted'))
            ->between(
                start: $dateStart,
                end: $dateEnd,
            )
            ->perMonth()
            ->count();

        return [
            'chart' => [
                'type' => 'bar',
                'stacked' => true,
                'responsive' => [
                    'breakpoint' => '435px',
                    'options' => [
                        'height' => '300px',
                    ],
                ],
            ],
            //@TODO Sort out code repetition below. No need for separate block for each status
            'series' => [
                [
                    'name' => 'draft',
                    'data' => $draft->map(fn (TrendValue $value) => $value->aggregate),
                ],
                [
                    'name' => 'published',
                    'data' => $published->map(fn (TrendValue $value) => $value->aggregate),
                ],
                [
                    'name' => 'review',
                    'data' => $review->map(fn (TrendValue $value) => $value->aggregate),
                ],
                [
                    'name' => 'declined',
                    'data' => $declined->map(fn (TrendValue $value) => $value->aggregate),
                ],
                [
                    'name' => 'accepted',
                    'data' => $accepted->map(fn (TrendValue $value) => $value->aggregate),
                ],
            ],
            'xaxis' => [
                'categories' => $yAxis->map(fn (TrendValue $value) => date_format(date_create($value->date), 'M y')),
                'labels' => [
                    'style' => [
                        'fontFamily' => 'inherit',
                    ],
                ],
            ],
            'yaxis' => [
                'labels' => [
                    'style' => [
                        'fontFamily' => 'inherit',
                    ],
                ],
            ],
            'dataLabels'=> [
                'enabled' => true,
            ],
            'colors' => ['#d3d3d3', '#00bfff', '#ff7e00', '#ff0000', '#32cd32'],
            'plotOptions' => [
                'column' => [
                    'borderRadius' => 3,
                    'horizontal' => false,
                ],
            ],
        ];
    }
}

[Nathan269]

Any update on this? I'm having the same issue with the line graph.

[LemonPie22]

I semi-resolved it by forcing the chart height to 600px (with 'height' => 600). It's a compromise because, although it looks okay on a desktop, it looks vertically stretched on a mobile. As you can see, I tried using responsive to change the height on smaller screens, but that made no difference.

'chart' => [
    'type' => 'bar',
    'stacked' => true,
    'height' => 600,
    'responsive' => [
        'breakpoint' => 640,
        'options' => [
            'height' => 300,
        ],
    ],
],