chore(version): added angular20 support (#2022)

lexasq · legrottagliegionata · web-flow · commit 550b743d873a · 2026-02-27T19:43:08.000+02:00
* Introduced DeepPartial type for use in Ng Charts Configuration

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* fix: prettier formatting for base-chart.directive.ts

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

* chore(version): added angular20 support

---------

Co-authored-by: Gionata &lt;legrottaglie.gionata@gmail.com&gt;
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -17,8 +17,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          cache: npm
-          node-version: 18
+          node-version: 20.19.0
       - run: npm ci
       - run: npx prettier --check .
       - run: npm run lint
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -25,7 +25,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           cache: npm
-          node-version: 18
+          node-version: 20.19
       - run: npm ci
       - run: npx prettier --check .
       - run: npm run lint
@@ -64,7 +64,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           cache: npm
-          node-version: 18
+          node-version: 20.19
 
       - uses: actions/download-artifact@v4
         with:
diff --git a/apps/ng2-charts-demo/e2e/ng2-charts.spec.ts-snapshots/navigate-to-main-Demo-page-and-check-info-1-chromium-win32.png b/apps/ng2-charts-demo/e2e/ng2-charts.spec.ts-snapshots/navigate-to-main-Demo-page-and-check-info-1-chromium-win32.png
diff --git a/apps/ng2-charts-demo/server.ts b/apps/ng2-charts-demo/server.ts
@@ -40,8 +40,8 @@ export function app(): express.Express {
         publicPath: browserDistFolder,
         providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
       })
-      .then((html: any) => res.send(html))
-      .catch((err: any) => next(err));
+      .then((html: string) => res.send(html))
+      .catch((err: Error) => next(err));
   });
 
   return server;
diff --git a/apps/ng2-charts-demo/src/app/app.component.ts b/apps/ng2-charts-demo/src/app/app.component.ts
@@ -2,11 +2,11 @@ import {
   AfterViewInit,
   Component,
   ElementRef,
-  Inject,
   QueryList,
   Renderer2,
   ViewChild,
   ViewChildren,
+  inject,
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { Router, RouterLink, RouterOutlet } from '@angular/router';
@@ -99,12 +99,10 @@ export class AppComponent implements AfterViewInit {
     | undefined;
   tabLabels: string[] = [];
 
-  constructor(
-    @Inject(DOCUMENT) private document: Document,
-    private renderer: Renderer2,
-    private themeService: ThemeService,
-    private router: Router,
-  ) {}
+  private document = inject(DOCUMENT);
+  private renderer = inject(Renderer2);
+  private themeService = inject(ThemeService);
+  private router = inject(Router);
 
   ngAfterViewInit(): void {
     if (this.tabElements) {
diff --git a/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.html b/apps/ng2-charts-demo/src/app/line-chart/line-chart.component.html
@@ -1,4 +1,4 @@
-<app-chart-host chartType="line">
+<app-chart-host chartType="line" ngSkipHydration>
   <canvas
     baseChart
     [data]="lineChartData"
@@ -7,7 +7,7 @@
     (chartHover)="chartHovered($event)"
     (chartClick)="chartClicked($event)"
   ></canvas>
-  <table>
+  <table ngSkipHydration>
     <tr>
       @for (label of lineChartData.labels; track label) {
         <th>{{ label }}</th>
diff --git a/copy-sources.mjs b/copy-sources.mjs
@@ -1,24 +1,25 @@
-import glob from 'glob';
-import fs from 'fs';
+import { glob } from 'glob';
+import fs from 'fs/promises';
 
-glob(
-  `apps/ng2-charts-demo/src/**/*.component.ts`,
-  { ignore: 'man.css' },
-  (err, files) => {
-    if (err) {
-      // Handle the error
-    }
+async function copyComponentFiles() {
+  try {
+    const files = await glob('apps/ng2-charts-demo/src/**/*.component.ts');
 
     // Iterate over the list of files
-    files.forEach((srcPath) => {
+    for (const srcPath of files) {
       // Construct the full path to the destination file
       const destPath = srcPath.replace('.ts', '.txt');
 
-      fs.copyFile(srcPath, destPath, (err) => {
-        if (err) {
-          // Handle the error
-        }
-      });
-    });
-  },
-);
+      try {
+        await fs.copyFile(srcPath, destPath);
+        console.log(`Copied ${srcPath} to ${destPath}`);
+      } catch (err) {
+        console.error(`Error copying ${srcPath} to ${destPath}:`, err);
+      }
+    }
+  } catch (err) {
+    console.error('Error finding files:', err);
+  }
+}
+
+copyComponentFiles();
diff --git a/libs/ng2-charts-schematics/src/ng-add/index.ts b/libs/ng2-charts-schematics/src/ng-add/index.ts
@@ -13,7 +13,7 @@ import { Schema } from './schema';
 import * as messages from './messages';
 import { addPackageToPackageJson } from '../utils/package-config';
 
-const NG2_CHARTS_VERSION = '5.0.0';
+const NG2_CHARTS_VERSION = '9.0.0';
 const CHARTJS_VERSION = '4.3.0';
 
 /**
diff --git a/libs/ng2-charts/package.json b/libs/ng2-charts/package.json
@@ -1,12 +1,12 @@
 {
-  "version": "8.0.1",
+  "version": "9.0.0",
   "name": "ng2-charts",
   "description": "Reactive, responsive, beautiful charts for Angular based on Chart.js",
   "peerDependencies": {
-    "@angular/platform-browser": ">=19.0.0",
-    "@angular/common": ">=19.0.0",
-    "@angular/core": ">=19.0.0",
-    "@angular/cdk": ">=19.0.0",
+    "@angular/platform-browser": ">=20.0.0",
+    "@angular/common": ">=20.0.0",
+    "@angular/core": ">=20.0.0",
+    "@angular/cdk": ">=20.0.0",
     "chart.js": "^3.4.0 || ^4.0.0",
     "rxjs": "^6.5.3 || ^7.4.0"
   },
diff --git a/libs/ng2-charts/src/index.ts b/libs/ng2-charts/src/index.ts
@@ -5,3 +5,4 @@
 export * from './lib/ng-charts.provider';
 export * from './lib/base-chart.directive';
 export * from './lib/theme.service';
+export * from './lib/utils';
diff --git a/libs/ng2-charts/src/lib/base-chart.directive.ts b/libs/ng2-charts/src/lib/base-chart.directive.ts
@@ -2,15 +2,16 @@ import {
   Directive,
   ElementRef,
   EventEmitter,
-  Inject,
   Input,
   NgZone,
   OnChanges,
   OnDestroy,
-  Optional,
   Output,
   SimpleChanges,
+  inject,
+  PLATFORM_ID,
 } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
 import {
   Chart,
   ChartConfiguration,
@@ -37,10 +38,10 @@ import {
   standalone: true,
 })
 export class BaseChartDirective<
-    TType extends ChartType = ChartType,
-    TData = DefaultDataPoint<TType>,
-    TLabel = unknown,
-  >
+  TType extends ChartType = ChartType,
+  TData = DefaultDataPoint<TType>,
+  TLabel = unknown,
+>
   implements OnDestroy, OnChanges
 {
   @Input() public type: ChartConfiguration<TType, TData, TLabel>['type'] =
@@ -70,27 +71,34 @@ export class BaseChartDirective<
     active: object[];
   }> = new EventEmitter();
 
-  public ctx: string;
+  public ctx: CanvasRenderingContext2D | null = null;
   public chart?: Chart<TType, TData, TLabel>;
 
   private subs: Subscription[] = [];
   private themeOverrides: ChartConfiguration['options'] = {};
+  private element = inject(ElementRef);
+  private zone = inject(NgZone);
+  private themeService = inject(ThemeService);
+  private config = inject(NG_CHARTS_CONFIGURATION, { optional: true }) as
+    | NgChartsConfiguration
+    | undefined;
+  private platformId = inject(PLATFORM_ID);
+  private isBrowser = isPlatformBrowser(this.platformId);
 
-  public constructor(
-    element: ElementRef,
-    private zone: NgZone,
-    private themeService: ThemeService,
-    @Optional() @Inject(NG_CHARTS_CONFIGURATION) config?: NgChartsConfiguration,
-  ) {
-    if (config?.registerables) {
-      Chart.register(...config.registerables);
+  public constructor() {
+    if (this.config?.registerables) {
+      Chart.register(...this.config.registerables);
     }
 
-    if (config?.defaults) {
-      defaults.set(config.defaults);
+    if (this.config?.defaults) {
+      defaults.set(this.config.defaults);
+    }
+
+    // Only get canvas context in browser environment
+    if (this.isBrowser) {
+      this.ctx = this.element.nativeElement.getContext('2d');
     }
 
-    this.ctx = element.nativeElement.getContext('2d');
     this.subs.push(
       this.themeService.colorschemesOptions
         .pipe(distinctUntilChanged())
@@ -99,6 +107,10 @@ export class BaseChartDirective<
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    if (!this.isBrowser) {
+      return; // Skip chart operations in SSR
+    }
+
     const requireRender = ['type'];
     const propertyNames = Object.getOwnPropertyNames(changes);
 
@@ -108,20 +120,29 @@ export class BaseChartDirective<
     ) {
       this.render();
     } else {
-      const config = this.getChartConfiguration();
+      // For legend changes, we need to update the chart options and re-render
+      if (this.chart && changes['legend']) {
+        const config = this.getChartConfiguration();
+        if (config.options) {
+          this.chart.options = config.options;
+        }
+        this.update();
+      } else if (this.chart) {
+        const config = this.getChartConfiguration();
 
-      // Using assign to avoid changing the original object reference
-      if (this.chart) {
-        Object.assign(this.chart.config.data, config.data);
-        if (this.chart.config.plugins) {
+        // Using assign to avoid changing the original object reference
+        if (config.data && this.chart.config.data) {
+          Object.assign(this.chart.config.data, config.data);
+        }
+        if (config.plugins && this.chart.config.plugins) {
           Object.assign(this.chart.config.plugins, config.plugins);
         }
-        if (this.chart.config.options) {
+        if (config.options && this.chart.config.options) {
           Object.assign(this.chart.config.options, config.options);
         }
-      }
 
-      this.update();
+        this.update();
+      }
     }
   }
 
@@ -133,24 +154,32 @@ export class BaseChartDirective<
     this.subs.forEach((s) => s.unsubscribe());
   }
 
-  public render(): Chart<TType, TData, TLabel> {
+  public render(): Chart<TType, TData, TLabel> | undefined {
+    if (!this.isBrowser || !this.ctx) {
+      return undefined;
+    }
+
     if (this.chart) {
       this.chart.destroy();
     }
 
     return this.zone.runOutsideAngular(
-      () => (this.chart = new Chart(this.ctx, this.getChartConfiguration())),
+      () =>
+        (this.chart = new Chart(
+          this.ctx as CanvasRenderingContext2D,
+          this.getChartConfiguration(),
+        )),
     );
   }
 
   public update(mode?: UpdateMode): void {
-    if (this.chart) {
+    if (this.chart && this.isBrowser) {
       this.zone.runOutsideAngular(() => this.chart?.update(mode));
     }
   }
 
   public hideDataset(index: number, hidden: boolean): void {
-    if (this.chart) {
+    if (this.chart && this.isBrowser) {
       this.chart.getDatasetMeta(index).hidden = hidden;
       this.update();
     }
@@ -180,33 +209,37 @@ export class BaseChartDirective<
     TData,
     TLabel
   >['options'] {
-    return merge(
-      {
-        onHover: (event: ChartEvent, active: object[]) => {
-          if (!this.chartHover.observed && !this.chartHover.observers?.length) {
-            return;
-          }
+    const baseOptions = {
+      onHover: (event: ChartEvent, active: object[]) => {
+        if (!this.chartHover.observed && !this.chartHover.observers?.length) {
+          return;
+        }
 
-          this.zone.run(() => this.chartHover.emit({ event, active }));
-        },
-        onClick: (event?: ChartEvent, active?: object[]) => {
-          if (!this.chartClick.observed && !this.chartClick.observers?.length) {
-            return;
-          }
+        this.zone.run(() => this.chartHover.emit({ event, active }));
+      },
+      onClick: (event?: ChartEvent, active?: object[]) => {
+        if (!this.chartClick.observed && !this.chartClick.observers?.length) {
+          return;
+        }
 
-          this.zone.run(() => this.chartClick.emit({ event, active }));
-        },
+        this.zone.run(() => this.chartClick.emit({ event, active }));
       },
-      this.themeOverrides,
-      this.options,
-      {
-        plugins: {
-          legend: {
-            display: this.legend,
-          },
+    };
+
+    const legendOptions = {
+      plugins: {
+        legend: {
+          display: this.legend,
         },
       },
-    );
+    };
+
+    return merge(
+      baseOptions,
+      this.themeOverrides || {},
+      this.options || {},
+      legendOptions,
+    ) as ChartConfiguration<TType, TData, TLabel>['options'];
   }
 
   private getChartConfiguration(): ChartConfiguration<TType, TData, TLabel> {
diff --git a/libs/ng2-charts/src/lib/ng-charts.provider.ts b/libs/ng2-charts/src/lib/ng-charts.provider.ts
@@ -4,7 +4,7 @@ import {
   Defaults,
   registerables as defaultRegisterables,
 } from 'chart.js';
-import { DeepPartial } from 'chart.js/dist/types/utils';
+import { DeepPartial } from './utils';
 import { merge } from 'lodash-es';
 
 export const NG_CHARTS_CONFIGURATION =
diff --git a/libs/ng2-charts/src/lib/utils.ts b/libs/ng2-charts/src/lib/utils.ts
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
