Home Forums Chart Support CanvasJS in LWC

CanvasJS in LWC

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

    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.



    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.


    <aura:application >
    	 <c:CanvasJSLightningComponent />


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


      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" }

    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

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

You must be logged in to reply to this topic.