F
Filament•15mo ago
BlackShadow

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
BlackShadowOP•15mo 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
pratik•12mo ago
@CodeWithDennis Stuck with the same problem. Did you figure it out?
BlackShadow
BlackShadowOP•12mo ago
Not supported i think, i switched to the apex plugin
Tim van Heugten
Tim van Heugten•12mo ago
pratik
pratik•12mo 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
Tim van Heugten•12mo ago
Yup, once in writing raw js you can just follow the ChartJs docs.
BlackShadow
BlackShadowOP•12mo 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
pratik•12mo ago
@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 
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
BlackShadowOP•12mo 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!

Did you find this page helpful?