Chart scales ticks

Setup a callback

Solution:

@CodeWithDennis Have you tried returning RAwJs instead of php array? This is working for me . As mentioned in the docs : https://filamentphp.com/docs/3.x/widgets/charts#setting-chart-configuration-options ```php use Filament\Support\RawJs;...

Chart widgets - Widgets - Filament

Jump to solution

9 Replies

BlackShadow•9mo ago

According to the documention of ChartJS

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, ticks) {
                        return '$' + value;
                    }
                }
            }
        }
    }
});

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, ticks) {
                        return '$' + value;
                    }
                }
            }
        }
    }
});

Current im trying to do the same in the Widget class: (which is not working)

protected function getOptions(): array
    {
        return [
            'plugins' => [
                'legend' => [
                    'display' => false,
                ],
            ],
            'scales' => [
                'x' => [
                    'ticks' => [
                        'callback' => function($value, $index, $ticks) {
                            return "$" . $value;
                        },
                    ]
                ],
            ],
            'indexAxis' => 'y'
        ];
    }

protected function getOptions(): array
    {
        return [
            'plugins' => [
                'legend' => [
                    'display' => false,
                ],
            ],
            'scales' => [
                'x' => [
                    'ticks' => [
                        'callback' => function($value, $index, $ticks) {
                            return "$" . $value;
                        },
                    ]
                ],
            ],
            'indexAxis' => 'y'
        ];
    }

pratik•6mo ago

@CodeWithDennis Stuck with the same problem. Did you figure it out?

BlackShadow•6mo ago

Not supported i think, i switched to the apex plugin

Tim van Heugten•6mo ago

Return a RawJS object as explained here: https://filamentphp.com/docs/3.x/widgets/charts#setting-chart-configuration-options

Chart widgets - Widgets - Filament

pratik•6mo ago

I got it working, I wanted to customize the ticks stepsize

    protected function getOptions(): RawJs
    {
        return RawJs::make(<<<JS
            {
                scales: {
                    y: {
                        ticks: {
                            stepSize: 10,
                        },
                    },
                },
            }
        JS);
    }

    protected function getOptions(): RawJs
    {
        return RawJs::make(<<<JS
            {
                scales: {
                    y: {
                        ticks: {
                            stepSize: 10,
                        },
                    },
                },
            }
        JS);
    }

Tim van Heugten•6mo ago

Yup, once in writing raw js you can just follow the ChartJs docs.

BlackShadow•6mo ago

I think when you try to add a function to add a prefix or affix to the value that is when it won't work. (Which was my issue)

Solution

pratik•6mo ago

use Filament\Support\RawJs;
 
protected function getOptions(): RawJs
{
    return RawJs::make(<<<JS
        {
            scales: {
                y: {
                    ticks: {
                        callback: (value) => '€' + value,
                    },
                },
            },
        }
    JS);
}

use Filament\Support\RawJs;
 
protected function getOptions(): RawJs
{
    return RawJs::make(<<<JS
        {
            scales: {
                y: {
                    ticks: {
                        callback: (value) => '€' + value,
                    },
                },
            },
        }
    JS);
}

Chart widgets - Widgets - Filament

BlackShadow•6mo ago

I can't remember, i read there was an issue with it but they might have fixed it since then. Not using it anymore but thanks for the solve!

Gaming

Programming

Chart scales ticks