[animations]="false" does not disable CSS transition

Describe the bug We disabled the animations on a chart (ngx-charts-bar-vertical-stacked) via [animations]=“false”. We expected the chart to “pop in”, however, it still fades in. We found that there are some styles active on the “ngx-charts-outer”-div:

.ngx-charts-outer {
    -webkit-animation: chartFadeIn linear .6s;
    animation: chartFadeIn linear .6s;
}

Are these styles supposed to be active when “animations” is set to false?

Expected behavior No fading / animating behavior.

Demo https://stackblitz.com/edit/angular-ivy-qjlujv?file=src%2Fapp%2Fapp.component.ts

ngx-charts version 20.1.0

[stanciupaul]

I noticed this problem on Angular 14 while on Angular 13 seems to be fine. Will the linked pull request also fix #1775? They look like the same issue to me.

1775 seems to have an issue with the graph lines not being rendered instantly, this issue is for the first fade in animation when the whole shape appears.

also when you re-enable a series from legend area

[kapselg]

It is very frustrating that disabling animations does not disable the fade-in animation.

EDIT: There is a temporary solution to disable fade animations for all charts. Just place this code in root CSS file of your project.

/* ngx charts bypass */
.ngx-charts-outer {
  -webkit-animation:chartFadeIn linear 0 !important;
  animation:chartFadeIn linear 0 !important;
}