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

[Zacherl]

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

[ozkoidi]

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.

[ZeroGDrive]

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.

[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

[rengert]

Any information / update on this?

[wojd0]

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;
}

[robvaneck]

I'm having the same issue with

    "@angular/core": "^14.2.5",
    "@swimlane/ngx-charts": "^20.1.2",

[animations]="false"

still animating the chart's line (svg path)

[yourwifeandkids]

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;
}

Still having issues with this on

"@angular/core": "^16.2.0",
"@swimlane/ngx-charts": "^20.4.1",

@wojd0's css solution did seemingly remove the fade in animation from the line chart element I'm working with, but I'm still getting the following warning in my console, which makes debugging a bit more tedious.

Warning: The animation trigger "animationState" is attempting to animate the following not animatable properties: strokeDashoffset

I have narrowed down that warning to the small line chart component I'm using.

I suspected that the transform property was responsible for said animation, so I also tried adding animation: none and transform: none to various related elements. But, nothing doing. Any updates here? It would be great to be able to completely disable all animation on ngx-charts.

[telmaco]

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;
}

Still having issues with this on

"@angular/core": "^16.2.0",
"@swimlane/ngx-charts": "^20.4.1",

@wojd0's css solution did seemingly remove the fade in animation from the line chart element I'm working with, but I'm still getting the following warning in my console, which makes debugging a bit more tedious.

Warning: The animation trigger "animationState" is attempting to animate the following not animatable properties: strokeDashoffset

I have narrowed down that warning to the small line chart component I'm using.

I suspected that the transform property was responsible for said animation, so I also tried adding animation: none and transform: none to various related elements. But, nothing doing. Any updates here? It would be great to be able to completely disable all animation on ngx-charts.

I am having the same issue with the lineChart :(

[FredyValstrauss]

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;
}

Still having issues with this on

"@angular/core": "^16.2.0",
"@swimlane/ngx-charts": "^20.4.1",

@wojd0's css solution did seemingly remove the fade in animation from the line chart element I'm working with, but I'm still getting the following warning in my console, which makes debugging a bit more tedious.

Warning: The animation trigger "animationState" is attempting to animate the following not animatable properties: strokeDashoffset

I have narrowed down that warning to the small line chart component I'm using.

I suspected that the transform property was responsible for said animation, so I also tried adding animation: none and transform: none to various related elements. But, nothing doing. Any updates here? It would be great to be able to completely disable all animation on ngx-charts.

Same issue for me for the line chart. Bar vertical stacked chart is working fine though. I'm using Angular 17.

[FrankCoder]

This is still an issue with the line chart and Angular 18 and you still get the following warning:

Warning: The animation trigger "animationState" is attempting to animate the following not animatable properties: strokeDashoffset