Reply To: Angular charts with newest Angular 17.x

[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