Angular, анимация Chart.js внутри mat-tab

Question

Я отображаю несколько диаграмм в mat-tab, и у меня нет анимации отображения данных на диаграмме.

animation: {
           duration: 1000,
           easing: 'easeOutQuart'
       }

За пределами анимации вкладки мат работает, но внутри остается только конечный эффект (время анимации ничего не меняет).Попробуйте использовать onComplete (), и он запускается через установленное время, но анимации нет.Я также использую ngx-чарты.Любые решения?

chart.ts

public chartOptions = {
        responsive: true,
        title: {
            display: false
        },
        legend: {
            display: false
        },
        scales: {
            xAxes:
                [{
                    display: true,
                    ticks: {
                        callback: function (dataLabel, index) {
                            if ([0, 5, 11, 17, 23].indexOf(index) !== -1) {
                                return dataLabel;
                            } else {
                                return null;
                            }
                            // return (index + 1) % 3 === 0 ? dataLabel : null;
                        },
                        autoSkip: false,
                        maxRotation: 0,
                        padding: 10,
                        fontColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    gridLines: {
                        display: false
                    }
                }],
            yAxes: [{
                ticks: {
                    fontColor: 'rgba(0,0,0,0.5)',
                    beginAtZero: true,
                    maxTicksLimit: 5,
                    padding: 10,
                    min: 0,
                    suggestedMax: 100
                },
                gridLines: {
                    drawTicks: false,
                    drawBorder: false,
                    color: 'rgba(0,0,0, 0.04)'
                }
            }]
        },
        animation: {
            duration: 1000,
            easing: 'easeOutQuart'
        },
        tooltips: {
            callbacks: {
                label: (item, data) => `${item.yLabel} ${data.datasets[item.datasetIndex].label}`,
                title: function (tooltipItems, data) {
                    return `Godzina: ${data.labels[tooltipItems[0].index]}`;
                },
            }
        }
    };

chart.html

<div class="chart-area">
    <canvas baseChart
            [chartType]="'bar'"
            [datasets]="[chartConfig.chartData]"
            [labels]="chartConfig.chartHours"
            [options]="chartConfig.chartOptions"
            [colors]="[chartConfig.chartColors]">
    </canvas>
</div>