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

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

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

Jump to solution

Bar Chartjs Animation how to animate?

 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

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

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

Jump to solution

Bar Chartjs Animation how to animate?

Bar Chartjs Animation how to animate?

Similar Threads

Similar Threads

Similar Threads