Integrating CanvasJS Charts in Salesforce Lightning Aura Component

Visualizing data within Salesforce enhances user engagement and decision-making. A recent study showed that dashboards with interactive charts increase user adoption by 70%. This article guides you through seamlessly integrating

Prerequisites

• Salesforce


• CanvasJS

Steps to Create a Lightning App

Create a New Lightning Application

• Open the Salesforce Developer Console.


• Navigate to File > New > Lightning Component.


• Provide a name for the component and a brief description.


• Click Submit.


• Save your component using File > Save or by pressing Ctrl + S.

Preview the Application

• Click the Preview button in the Developer Console (located in the upper-right corner).


• This will open the application in your browser.

Integrating the CanvasJS Library

CanvasJSLightningApp.app

This application serves as the container for the component.

<aura:application>

    <c:CanvasJSLightningComponent />

</aura:application>

CanvasJSLightningComponent.cmp

This component renders the chart. Ensure the ltng:require directive includes the correct paths to your static resources.

<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

This controller includes the logic to render the CanvasJS chart.

({

    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();

    }

})

Static Resources: The ltng:require directive includes jQuery and CanvasJS as dependencies.

Chart Rendering: The renderChart method initializes the CanvasJS chart within the chartContainer div.

Chart Data: Customize the dataPoints array to display the desired data.

Preview and Verify

• Save all files in the Developer Console.


• Open the application preview to verify the chart renders correctly.


• Adjust look & feel of chart as needed to fit your requirements.

This integration provides a dynamic way to visualize data using CanvasJS within Salesforce Lightning. Ensure all libraries are properly uploaded and referenced to avoid issues during deployment. For additional information, refer to the GitHub repository: CanvasJS Lightning Aura App.