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