Filament•16mo ago

Bar Chartjs Animation how to animate?

Hello. I am using chartjs of several type and everything is OK but the animation works for line charts, but not for the rest (bars, pie, doughnut). https://filamentphp.com/docs/3.x/widgets/charts For the line chart (which animates correctly) I have used:

 return [
            'datasets' => [
                [
                    'label' => 'Tipos de Finca',
                    'data' => $data->map(fn (TrendValue $value) => $value->aggregate),
                    'borderColor'=> 'rgb(75, 192, 192)',
                    'borderWidth'=> 6,
                    'pointBorderWidth' => 12,
                    'animations' => [
                        'tension' => [
                          'duration' => 1500,
                          'easing' => 'easeInOutQuint',
                          'from' => 1,
                          'to' => 0,
                          'loop' => false
                        ],
                    ],
                ],
            ],
            'labels' => $data->map(fn (TrendValue $value) => $value->date),
        ];

 return [
            'datasets' => [
                [
                    'label' => 'Tipos de Finca',
                    'data' => $data->map(fn (TrendValue $value) => $value->aggregate),
                    'borderColor'=> 'rgb(75, 192, 192)',
                    'borderWidth'=> 6,
                    'pointBorderWidth' => 12,
                    'animations' => [
                        'tension' => [
                          'duration' => 1500,
                          'easing' => 'easeInOutQuint',
                          'from' => 1,
                          'to' => 0,
                          'loop' => false
                        ],
                    ],
                ],
            ],
            'labels' => $data->map(fn (TrendValue $value) => $value->date),
        ];

I try the same for the other charts and nothing happens. Any help of where I can find the info? I have already checked the official docs in https://www.chartjs.org/docs/latest/

Chart widgets - Widgets - Filament

Chart.js | Chart.js

Open source HTML5 Charts for your website

Solution:

```php 'datasets' => [ [ 'data' => [...], 'animation' => [...

Jump to solution

2 Replies

Solution

LeandroFerreira•16mo ago

'datasets' => [
    [
        'data' => [...],
        'animation' => [
            'duration' => 1500
        ],
    ],
],

'datasets' => [
    [
        'data' => [...],
        'animation' => [
            'duration' => 1500
        ],
    ],
],

Albert LensOP•16mo ago

Thanks a lot. I had too much info. One only line for duration is enough. Tks,

Gaming

Programming

Bar Chartjs Animation how to animate?