Home Forums Chart Support How To Implement canvasjs LWC

How To Implement canvasjs LWC

Viewing 2 posts - 1 through 2 (of 2 total)
  • #35685

    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.

    #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

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

You must be logged in to reply to this topic.