Home › Forums › Chart Support › CanvasJS in LWC › Reply To: CanvasJS in LWC
@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:
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