extraJsOptions

[sparkfield]

Filament-Apex-Charts is a wonderful package, thank you for that!

I don't know whether it is a bug or I don't understand how to use it, but I can't get the extraJsOptions to work.

I tried to replicate the Revenue bar chart from your Demo application in a simplified form. What I want is to format the labels on the Y-axis, where the values should be prefixed with a '$'.

However, it does not show up. I tried several other parameters like the y-axis title, but nothing seems to work.

Do I miss something?

The code is as follows:

namespace App\Filament\Widgets;

use Filament\Support\RawJs;
use Illuminate\Support\Facades\Log;
use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

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

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

    /**
     * Chart options (series, labels, types, size, animations...)
     * https://apexcharts.com/docs/options
     *
     * @return array
     */
    protected function getOptions(): array
    {
        return [
            'chart' => [
                'type' => 'bar',
                'height' => 300,
                'stacked' => true,
                'toolbar' => [
                    'show' => false,
                ],
            ],
            'dataLabels' => [
                'enabled' => false,
            ],
            'series' => [
                [
                    'name' => 'Earnings',
                    'data' => [70, 43, 68, 103, 141, 73, 57, 92, 102, 159, 130, 184],
                ],
                [
                    'name' => 'Expenses',
                    'data' => [-7, -4, -6, -10, -14, -7, -5, -9, -10, -15, -13, -18],
                ],
            ],
        ];
    }

    protected function extraJsOptions(): ?RawJs
    {
        return RawJs::make(<<<'JS'
        {
            yaxis: {
                labels: {
                    formatter: function (val, index) {
                        return '$' + val
                    }
                }
            }
        }
        JS);
    }
}

[leandrocfe]

Add the yaxis in the getOptions

'yaxis' => [
    'labels' => [
        'style' => [
            'fontFamily' => 'inherit',
        ],
    ],
],

[sparkfield]

Thank you for your prompt response, I added it, but to no avail

    protected function getOptions(): array
    {
        return [
            'chart' => [
                'type' => 'bar',
                'height' => 300,
                'stacked' => true,
                'toolbar' => [
                    'show' => false,
                ],
            ],
            'dataLabels' => [
                'enabled' => false,
            ],
            'series' => [
                [
                    'name' => 'Earnings',
                    'data' => [70, 43, 68, 103, 141, 73, 57, 92, 102, 159, 130, 184],
                ],
                [
                    'name' => 'Expenses',
                    'data' => [-7, -4, -6, -10, -14, -7, -5, -9, -10, -15, -13, -18],
                ],
            ],
            'yaxis' => [
                'labels' => [
                    'style' => [
                        'fontFamily' => 'inherit',
                    ],
                ],
            ],
        ];
    }

    protected function extraJsOptions(): ?RawJs
    {
        return RawJs::make(<<<'JS'
        {
            yaxis: {
                labels: {
                    formatter: function (val, index) {
                        return '$' + val
                    }
                }
            }
        }
        JS);
    }

[leandrocfe]

If you published the views, try to remove the folder please.

[leandrocfe]

This example is working here

protected function getOptions(): array
    {
        return [
            'chart' => [
                'type' => 'bar',
                'height' => 300,
                'parentHeightOffset' => 2,
                'stacked' => true,
                'toolbar' => [
                    'show' => false,
                ],
            ],
            'series' => [
                [
                    'name' => 'Earning',
                    'data' => [270, 210, 180, 200, 250, 280, 250, 270, 150, 210, 180, 200],
                ],
                [
                    'name' => 'Expense',
                    'data' => [-140, -160, -180, -150, -100, -60, -80, -100, -180, -160, -180, -150],
                ],
            ],
            'plotOptions' => [
                'bar' => [
                    'horizontal' => false,
                    'columnWidth' => '50%',
                ],
            ],
            'dataLabels' => [
                'enabled' => false,
            ],
            'legend' => [
                'show' => true,
                'horizontalAlign' => 'right',
                'position' => 'top',
                'fontFamily' => 'inherit',
                'markers' => [
                    'height' => 12,
                    'width' => 12,
                    'radius' => 12,
                    'offsetX' => -3,
                    'offsetY' => 2,
                ],
                'itemMargin' => [
                    'horizontal' => 5,
                ],
            ],
            'grid' => [
                'show' => false,

            ],
            'xaxis' => [
                'categories' => [
                    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
                ],
                'labels' => [
                    'style' => [
                        'fontFamily' => 'inherit',
                    ],
                ],
                'axisTicks' => [
                    'show' => false,
                ],
                'axisBorder' => [
                    'show' => false,
                ],
            ],
            'yaxis' => [
                'offsetX' => -16,
                'labels' => [
                    'style' => [
                        'fontFamily' => 'inherit',
                        'fontWeight' => 600,
                    ],
                ],
                'min' => -200,
                'max' => 300,
                'tickAmount' => 5,
            ],
            'fill' => [
                'type' => 'gradient',
                'gradient' => [
                    'shade' => 'dark',
                    'type' => 'vertical',
                    'shadeIntensity' => 0.5,
                    'gradientToColors' => ['#d97706', '#c2410c'],
                    'opacityFrom' => 1,
                    'opacityTo' => 1,
                    'stops' => [0, 100],
                ],
            ],
            'stroke' => [
                'curve' => 'smooth',
                'width' => 1,
                'lineCap' => 'round',
            ],
            'colors' => ['#f59e0b', '#ea580c'],
        ];
    }

    protected function extraJsOptions(): ?RawJs
    {
        return RawJs::make(<<<'JS'
        {
            yaxis: {
                labels: {
                    formatter: function (val, index) {
                        return '$' + val
                    }
                }
            },
            tooltip: {
                x: {
                    formatter: function (val) {
                        return val + '/23'
                    }
                }
            },
        }
        JS);
    }

[sparkfield]

Very weird, I had to close all my browser windows and restart the browser. Now it works.

Thank you very much for you help!