fix: render animation misaligned

projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts

@@ -213,6 +213,7 @@ export class BarHorizontal2DComponent extends BaseChartComponent {
   barOrientation = BarOrientation;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }

projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-normalized.component.ts

@@ -186,6 +186,7 @@ export class BarHorizontalNormalizedComponent extends BaseChartComponent {
   isSSR = false;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }

projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-stacked.component.ts

@@ -200,6 +200,7 @@ export class BarHorizontalStackedComponent extends BaseChartComponent {
   isSSR = false;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }

projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts

@@ -206,6 +206,7 @@ export class BarVertical2DComponent extends BaseChartComponent {
   barOrientation = BarOrientation;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }

projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts

@@ -185,6 +185,7 @@ export class BarVerticalNormalizedComponent extends BaseChartComponent {
   barChartType = BarChartType;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }

projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts

@@ -200,6 +200,7 @@ export class BarVerticalStackedComponent extends BaseChartComponent {
   barChartType = BarChartType;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }

projects/swimlane/ngx-charts/src/lib/bar-chart/bar.component.ts

@@ -1,5 +1,6 @@
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -65,16 +66,23 @@ export class BarComponent implements OnChanges {
   gradientStops: Gradient[];
   hasGradient: boolean = false;
   hideBar: boolean = false;
+  pathAnimationDebounceTimer = null;
 
-  constructor(element: ElementRef) {
+  constructor(private cdf: ChangeDetectorRef, element: ElementRef) {
     this.element = element.nativeElement;
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.roundEdges) {
+    if (
+      changes.roundEdges ||
+      /* fix: appears to render animation misaligned */
+      changes.x ||
+      changes.y ||
+      changes.height ||
+      changes.width
+    ) {
       this.loadAnimation();
-    }
-    this.update();
+    } else this.update();
   }
 
   update(): void {
@@ -88,13 +96,20 @@ export class BarComponent implements OnChanges {
       this.hasGradient = false;
     }
 
-    this.updatePathEl();
     this.checkToHideBar();
+    if (this.pathAnimationDebounceTimer) {
+      clearTimeout(this.pathAnimationDebounceTimer);
+    }
+    this.pathAnimationDebounceTimer = setTimeout(() => {
+      this.updatePathEl();
+      this.pathAnimationDebounceTimer = null;
+    }, 100);
   }
 
   loadAnimation(): void {
     this.path = this.getStartingPath();
-    setTimeout(this.update.bind(this), 100);
+    this.cdf.markForCheck();
+    this.update();
   }
 
   updatePathEl(): void {

projects/swimlane/ngx-charts/src/lib/bubble-chart/bubble-chart.component.ts

@@ -223,6 +223,7 @@ export class BubbleChartComponent extends BaseChartComponent {
   isSSR = false;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }

projects/swimlane/ngx-charts/src/lib/common/base-chart.component.ts

@@ -54,6 +54,7 @@ export class BaseChartComponent implements OnChanges, AfterViewInit, OnDestroy,
     if (isPlatformServer(this.platformId)) {
       this.animations = false;
     }
+    this.update();
   }
 
   ngAfterViewInit(): void {

projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts

@@ -274,6 +274,7 @@ export class LineChartComponent extends BaseChartComponent implements OnInit {
   isSSR = false;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }

projects/swimlane/ngx-charts/src/lib/polar-chart/polar-chart.component.ts

@@ -225,6 +225,7 @@ export class PolarChartComponent extends BaseChartComponent implements OnInit {
   isSSR = false;
 
   ngOnInit() {
+    super.ngOnInit();
     if (isPlatformServer(this.platformId)) {
       this.isSSR = true;
     }