ApexCharts

1PostsPerMonthSeries.php

<?php

namespace App\Traits;

trait PostsPerMonthSeries
{
    protected function getChartData(): array
    {
        return [
            'data' => [
                10, 12, 20, 28,
                35, 42, 50, 45,
                37, 23, 15, 8,
            ],
            'labels' => [
                '2024-01', '2024-02', '2024-03', '2024-04',
                '2024-05', '2024-06', '2024-07', '2024-08',
                '2024-09', '2024-10', '2024-11', '2024-12',
            ],
        ];
    }
}

2RatingSeries.php

<?php

namespace App\Traits;

trait RatingSeries
{
    protected function getChartData(): array
    {
        return [
            'data' => [50, 30, 18, 5, 13],
            'labels' => ['⭐⭐⭐⭐⭐', '⭐⭐⭐⭐', '⭐⭐⭐', '⭐⭐', '⭐'],
        ];
    }
}

3ApexPostsPerMonth.php

<?php

namespace App\Filament\Widgets;

use App\Traits\PostsPerMonthSeries;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class ApexPostsPerMonth extends ApexChartWidget
{
    use PostsPerMonthSeries;

    protected static ?string $chartId = 'postsPerMonth';

    protected static ?string $heading = 'Posts per month (ApexCharts)';

    protected static ?int $contentHeight = 293;

    protected function getOptions(): array
    {
        $chartData = $this->getChartData();

        return [
            'chart' => [
                'type' => 'bar',
                'height' => 250,
                'toolbar' => [
                    'show' => false,
                ],
            ],
            'series' => [
                [
                    'name' => 'Posts per month',
                    'data' => $chartData['data'],
                ],
            ],
            'xaxis' => [
                'categories' => $chartData['labels'],
                'axisBorder' => [
                    'show' => false,
                ],
                'axisTicks' => [
                    'show' => false,
                ],
                'labels' => [
                    'style' => [
                        'fontWeight' => 400,
                        'fontFamily' => 'inherit',
                    ],
                ],
            ],
            'yaxis' => [
                'labels' => [
                    'style' => [
                        'fontWeight' => 400,
                        'fontFamily' => 'inherit',
                    ],
                ],
            ],
            'colors' => ['#f59e0b'],
            'fill' => [
                'type' => 'gradient',
                'gradient' => [
                    'shade' => 'dark',
                    'type' => 'vertical',
                    'shadeIntensity' => 0.5,
                    'gradientToColors' => ['#fbbf24'],
                    'inverseColors' => true,
                    'opacityFrom' => 1,
                    'opacityTo' => 1,
                    'stops' => [0, 100],
                ],
            ],
            'plotOptions' => [
                'bar' => [
                    'borderRadius' => 5,
                    'borderRadiusApplication' => 'end',
                ],
            ],
            'dataLabels' => [
                'enabled' => true,
            ],
            'grid' => [
                'show' => true,
                'strokeDashArray' => 4,
                'borderColor' => '#374151',
                'xaxis' => [
                    'lines' => [
                        'show' => true,
                    ],
                ],
                'yaxis' => [
                    'lines' => [
                        'show' => true,
                    ],
                ],
            ],
            'markers' => [
                'size' => 0,
            ],

            'stroke' => [
                'curve' => 'smooth',
                'width' => 3,
            ],

            'tooltip' => [
                'enabled' => true,
            ],
        ];
    }
}

4ApexPostsRating.php

<?php

namespace App\Filament\Widgets;

use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class ApexPostsRating extends ApexChartWidget
{
    use \App\Traits\RatingSeries;

    /**
     * Chart Id
     */
    protected static ?string $chartId = 'apexPostsRating';

    protected static ?int $sort = 3;

    /**
     * Widget Title
     */
    protected static ?string $heading = 'Posts rating (ApexCharts)';

    protected static ?int $contentHeight = 293;

    /**
     * Chart options (series, labels, types, size, animations...)
     * https://apexcharts.com/docs/options
     */
    protected function getOptions(): array
    {
        $chartData = $this->getChartData();

        return [
            'chart' => [
                'type' => 'bar',
                'height' => 300,
                'toolbar' => [
                    'show' => false,
                ],
            ],
            'series' => [
                [
                    'name' => 'Posts rating',
                    'data' => $chartData['data'],
                ],
            ],
            'xaxis' => [
                'categories' => $chartData['labels'],
                'axisBorder' => [
                    'show' => false,
                ],
                'axisTicks' => [
                    'show' => false,
                ],
                'labels' => [
                    'show' => false,
                    'style' => [
                        'fontFamily' => 'inherit',
                    ],
                ],
            ],
            'yaxis' => [
                'labels' => [
                    'style' => [
                        'fontFamily' => 'inherit',
                        'fontWeight' => 400,
                        'fontSize' => '18px',
                    ],
                ],
            ],
            'colors' => ['#f59e0b'],
            'fill' => [
                'type' => 'gradient',
                'gradient' => [
                    'shade' => 'dark',
                    'type' => 'vertical',
                    'shadeIntensity' => 0.5,
                    'gradientToColors' => ['#fbbf24'],
                    'inverseColors' => true,
                    'opacityFrom' => 1,
                    'opacityTo' => 1,
                    'stops' => [0, 100],
                ],
            ],
            'plotOptions' => [
                'bar' => [
                    'borderRadius' => 10,
                    'horizontal' => true,
                    'barHeight' => '50%',
                    'borderRadiusApplication' => 'end',
                ],
            ],
            'dataLabels' => [
                'enabled' => true,
                'style' => [
                    'fontSize' => '14px',
                    'fontWeight' => 'bold',
                ],
            ],
            'grid' => [
                'show' => true,
                'strokeDashArray' => 4,
                'borderColor' => '#374151',
                'xaxis' => [
                    'lines' => [
                        'show' => false,
                    ],
                ],
                'yaxis' => [
                    'lines' => [
                        'show' => true,
                    ],
                ],
            ],

            'stroke' => [
                'width' => 3,
            ],

            'tooltip' => [
                'enabled' => true,
            ],
        ];
    }
}