Home Forums Chart Support How To Implement canvasjs LWC Reply To: How To Implement canvasjs LWC

#35749

@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