CanvasJS in LWC

• March 4, 2021 at 1:54 pm #32966
  
  rutik90

  I want to display Funnel Chart in Lightning Web Component. I tried using CanvasJS, but it is not working. Can someone help me with this? I need to see how to render chart in LWC using CanvasJS. Any simple code snippets, github repo would work.

  March 4, 2021 at 7:30 pm #32973
  
  Shashi Ranjan

  @rutik90,

  CanvasJS library is based on JavaScript and can be integrated with any framework or library that supports JavaScript. Below I have mentioned the steps for creating a Lightning App and integrating CanvasJS with it.

  Please refer to the step below for creating a Lightning App:

  1. Open the Developer Console.
  2. Open the New Lightning Bundle panel for an Aura component(Select File > New > Lightning Component).
  3. Specify Name and Description of the component, click Submit and Implement the application
  4. For Saving the file: click File > Save(to save the file) or, press Ctrl + S
  5. To get preview of the application in the browser: click Preview(upper right corner)

  Now that the app is created, you can use the below code in your app, js and cmp files for completing the integration.

  CanvasJSLightningApp.app:

  <aura:application >
  	 <c:CanvasJSLightningComponent />
  </aura:application>

  CanvasJSLightningComponent.cmp:

  <aura:component implements="flexipage:availableForAllPageTypes" access="global">
      <ltng:require scripts="/resource/jquery,/resource/canvasjs" afterScriptsLoaded="{!c.renderChart}"/>
      <div aura:id="chartContainer" style="width: 100%; height: 360px;"></div>
  </aura:component>

  CanvasJSLightningComponentController.js:

  ({
    renderChart : function(component, event, helper) {        
      new CanvasJS.Chart(component.find("chartContainer").getElement(), {
        title: {
          text: "CanvasJS Chart - Salesforce Lightning App"
        },
        data: [{
          type: "funnel",
          dataPoints: [
            { y: 100, label: "Apple" },
            { y: 63, label: "Orange" },
            { y: 35, label: "Banana" },
            { y: 15, label: "Mango" },
            { y: 5, label: "Grape" }
          ]
        }]
      }).render();
    }
  })

  You can also refer to this Github Repo for the working code that can be used for integration of CanvasJS with Lightning App.

  —
  Shashi Ranjan
  Team CanvasJS