CanvasJS in LWC

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

[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