How To Implement canvasjs LWC

[smadil997]

How I can Implement canvasjs in LWC components not aura components.
I went through with this link CanvasJS in LWC but it’s showing implementation only for aura not Lightning Web Components.

[Indranil]

@smadil997,

Please refer to the below steps for integrating CanvasJS in Salesforce Lightning Web Components:

1. Add the CanvasJS library to the Static Resources in your Salesforce account
2. Create a Lightning Web Component following the steps mentioned in this resource
3. Once the Lightning Web Component is created you can add the below HTML and JS code in the lwc component

HTML

<template>
    <lightning-card>
        <div data-id="chartContainer" style="height: 300px; width: 100%;" lwc:dom="manual"></div>
    </lightning-card>
</template>

JS

import { LightningElement } from 'lwc';
import CanvasJS from '@salesforce/resourceUrl/CanvasJS';
import { loadScript } from 'lightning/platformResourceLoader';

export default class Salesforce_canvasjs extends LightningElement {

  canvasjsInitialized = false;
  chart;
  error;
  renderedCallback() {
    if (this.canvasjsInitialized) {
      return;
    }
    this.canvasjsInitialized = true;

    loadScript(this, CanvasJS).then(() => {
      const container = this.template.querySelector('[data-id="chartContainer"]');
      this.chart = new window.CanvasJS.Chart(container, {
        animationEnabled: true,
        title: {
          text: "Basic Column Chart in Salesforce LWC"
        },
        data: [{
          type: "column",
          dataPoints: [
            { y: 41, label: "Apple" },
            { y: 55, label: "Mango" },
            { y: 50, label: "Orange" },
            { y: 65, label: "Banana" },
            { y: 95, label: "Pineapple" },
            { y: 68, label: "Pears" },
            { y: 28, label: "Grapes" },
            { y: 34, label: "Lychee" },
            { y: 14, label: "Jackfruit" }
          ]
        }]
      });
      this.chart.render();
    }).catch((error) => {
      this.error = error;
    });
  }
}

4. Deploy the project to your Salesforce account.

You can also refer to this Github Repo for the working code on integration of CanvasJS in Lightning Web Components.

___________
Indranil Deo
Team CanvasJS

[akshatChoudhary]

@indranil

I tried the same code given by you in chat forum but on embedding this LWC component it is giving blank screen. What to do?

[Thangaraj Raman]

@akshatchoudhary,

CanvasJS charts seems to be working fine with salesforce lightning web component. Please take a look at this Github Repo for the working code.

If you are still facing issues, kindly create a sample project reproducing the issue and share it with us over Google Drive or OneDrive so that we can look into the code, run it locally to understand the scenario better, and help you out.

—
Thangaraj Raman
Team CanvasJS