Home Forums Chart Support Integrating CanvasJS Server Side Rendering

Integrating CanvasJS Server Side Rendering

Viewing 3 posts - 1 through 3 (of 3 total)
  • #38751

    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

    #38782

    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).

    CanvasJS Angular Chart with Angular Universal

    —-
    Manoj Mohan
    Team CanvasJS

    #44598

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.