How to change animations to charts

Question

import { ViewEncapsulation, Component, Input, Output, EventEmitter } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
interface MergedData {
    color: string;
    name: string;
    value: number;
};
interface ChartData {
    name: string;
    value: number;
    color: string;
};
@Component({
    selector: 'app-base-chart-line',
    templateUrl: './base-chart-line.component.html',
    styleUrls: ['./base-chart-line.component.scss'],
    encapsulation: ViewEncapsulation.None,
})
export class BaseChartLineComponent {
    constructor(private transateService: TranslateService) { }
    customColors: { name: string; value: string; }[] = [];
    _data = [];
    mergedData: MergedData[] = [];
    total = 0;
    noDataColor = '#999999';
    isNoDataChart = false;
    ticks = [2000, 9000];
    multi: any[];
   @Output() selectedBar = new EventEmitter<string>()


    /**
     * Asigna un color a cada dato
     * @returns array nombre-color
     */
    getCustomColors() {
        const sol = [];
        for (let i = 0; i < this.data.length; i++) {
            sol.push({ name: this.data[i].name, value: this.data[i].color });
        }
        return sol;
    }
    /**
     * mergea el array de datos de colores
     * @returns array datos-colores
     */
    mergeData() {
        const sol = [];
        for (let i = 0; i < this.data.length; i++) {
            sol.push({
                name: this.data[i].name,
                value: this.data[i].value,
                color: this.data[i].color
            });
        }
        return sol;
    }
    @Input()
    set data(value: ChartData[]) {
        this._data = value;
        this.customColors = this.getCustomColors();
        this.mergedData = this.mergeData();
        this.setTicks();
        this.clase();
        this.isNoDataChart = false;
        if (this.total === 0) {
            this.isNoDataChart = true;
        }
    }
    get data() {
        return this._data;
    }
    clase(){
        // var elemento = document.getElementsByClassName("images");
        const floorElements = document.getElementsByClassName('horizontal-legend') as HTMLCollectionOf<HTMLElement>;
        floorElements[0].className = 'vertical-legend';
    }
    setTicks() {
        const values: number[] = [];
        this._data.forEach((chartData) => {
            chartData.series.forEach((serie) => {
                values.push(serie.value);
            })
        });
        this.ticks =
            [Math.floor(Math.min(...values) / 50) * 50, Math.max(...values) % 50 === 0 ?
                Math.floor((Math.max(...values) / 50)) * 50 :
                Math.floor((Math.max(...values) / 50) + 1) * 50];
    }
    /**
     * emite un evento que contiene el nombre de la columna sobre la que se clickó
     * @param column nombre de la columna sobre la que se clickó
     */
    emmitSelectEvent($event): void {
        this.selectedBar.emit($event.value);
    }

}

im havenning a problem with the animations of the line charts, here at the documentation (https://swimlane.github.io/ngx-charts/#/ngx-charts/line-chart) you can see the animation of the library, but when I activate my animations that is what I see: https://i.imgur.com/LKBbl3K.mp4 and I need to have the same animation that we can see at the documentation.

<div class="barchart">
    <div #chart class="chart">
        <ngx-charts-line-chart [view]="[300,160]" [results]="data" [customColors]="customColors"
             [yAxisLabel]="''" [legend]="true" [legendTitle]="''" [showGridLines] = "true" [yAxisTicks] = "ticks"   [xAxisTickFormatting]='setTicks' [legendPosition]="'below'"
            [showXAxisLabel]="true" [showYAxisLabel]="true" [xAxis]="false" [yAxis]="true" [gradient]="true" [animations]="true" (select)="emmitSelectEvent($event)">
        </ngx-charts-line-chart>
    </div>
</div>