Angular charts with newest Angular 17.x

• December 28, 2023 at 3:55 pm #44392
  
  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?

  December 29, 2023 at 2:43 pm #44394
  
  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

  January 3, 2024 at 10:38 pm #44412
  
  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.

  January 8, 2024 at 6:53 pm #44439
  
  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

  February 6, 2024 at 10:13 am #44599
  
  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