Integrating CanvasJS Server Side Rendering

[JEA]

Hi there guys…
I’m having trouble integrating CanvasJS bar charts with my Angular app, which uses Angular Universal (Server Side Rendering).
When adding the charts, the server explodes giving me the following error coming from canvas.min.js as SSR is not supporting JavaScript (window, document, etc.).
Any idea of what should we do to solve this pesky issue?
Many thanks in advance for your time and ideas!
Best regards, JE

[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

[Manoj Mohan]

JE,

[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