Angular charts with newest Angular 17.x

[theMich]

When attempting to import the CanvasJSAngularChartsModule in an Angular application using version 17.x, an internal server error is encountered, and the following stack trace is logged:
Internal server error: document is not defined
at eval (c:/Users/micha/source/repos/Mathlytic/Web/node_modules/@canvasjs/charts/canvasjs.min.js:45:437)
at node_modules/@canvasjs/charts/canvasjs.min.js (c:/Users/micha/source/repos/Mathlytic/Web/node_modules/@canvasjs/charts/canvasjs.min.js:932:428)
at __require2 (C:/Users/micha/source/repos/Mathlytic/Web/.angular/vite-root/Web/chunk-4IYHBQYT.mjs:33:50)
at eval (c:/Users/micha/source/repos/Mathlytic/Web/node_modules/@canvasjs/angular-charts/fesm2015/canvasjs-angular-charts.js:20:16)
at async instantiateModule (file:///C:/Users/micha/source/repos/Mathlytic/Web/node_modules/vite/dist/node/chunks/dep-68d1a114.js:56052:9)

Does anyone face the same errors with the new version or is there any solution for this?

[Manoj Mohan]

@themich,

In Angular 17, by default components are generated as standalone application. You can import CanvasJSAngularChartsModule module into your standalone component as shown in the code snippet below.

import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CanvasJSAngularChartsModule],
  template: `
  <div>
   <canvasjs-chart [options]="chartOptions"></canvasjs-chart>
  </div>
  `,
})

Also, check out this StackBlitz sample for integrating CanvasJS Charts in Angular 17.

If you are still facing the issue, kindly create sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with sample data so that we can look into your code, run it locally at our end to understand the scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS

[theMich]

Hi, thanks for the answer.

I don’t use is as a standalone application. The problem is the SSR, but I couldn’t figure out a solution.

[Manoj Mohan]

@themich,

CanvasJS is a client-side library that requires browser environment and APIs to run. You should prevent running CanvasJS in the server environment by importing chart component only when document object is present. Please take a look at the code-snippet below.

/*canvasjs.angular.component.ts*/
.
.
if(typeof document === 'object' && !!document)
    var CanvasJS = require('../../node_modules/@canvasjs/charts');
.
.
/*app.component.ts*/
export class AppComponent {
  isDOMPresent:Boolean = typeof document === "object" && !!document;
  .
  .
}
/*app.component.html*/
<div>
  <canvasjs-chart  *ngIf="isDOMPresent" [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart>
</div>

Kindly download the working sample project that shows how to add CanvasJS Angular Chart component in Angular v17 (SSR) from here.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@themich,

[Update]

We have released CanvasJS Angular Charts v1.1.0 to make our charts work with Angular Universal(SSR) apps. Please refer to the release blog for more information.

—-
Manoj Mohan
Team CanvasJS