Reply To: Integrating CanvasJS Server Side Rendering

[Manoj Mohan]

JE,

Angular Universal (Server Side Rendering) renders the application twice, once in server environment without any browser API and tries to load CanvasJS. Since CanvasJS requires browser environment and API’s to run, so we need to prevent running it in server environment. You can do so by modifying our chart component to import CanvasJS only when document object is present. Also, while adding canvasjs-chart to html, you can add ngIf attribute directive to add chart in client side only

/*canvasjs.angular.component.ts*/
.
.
if(typeof document === 'object' && !!document)
    var CanvasJS = require('./canvasjs.min');
.
.
/*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>

Please take a look at this sample project for an example on CanvasJS Angular Chart with Angular Universal(SSR).

—-
Manoj Mohan
Team CanvasJS