Integrating CanvasJS Charts in Salesforce Lightning Aura Component

Visualizing data in Salesforce can enhance user engagement and decision-making. A recent study showed that dashboards with interactive charts increased user adoption by 70%. This article will guide you through seamless integration CanvasJS charts into your Lightning Aura components for impactful data representation.

Prerequisites

Steps to create a Lightning app

Create a new Lightning app

• Open the Salesforce Developer Console.
• Navigate to File > New > Lightning Component.
• Provide a name and a brief description of the component.
• Click Submit.
• Use File > Save or press Ctrl + S to save the component.

Preview application

• Click the Preview button in the Developer Console (top right corner).
• This will open the application in your browser.

Integrate CanvasJS library

CanvasJSLightningApp.app
The application acts as a container for components.

CanvasJSLightningComponent.cmp
This component renders a chart. Make sure that the ltng:require directive contains the correct path to the static resource.

CanvasJSLightningComponentController.js
This controller contains the logic for rendering 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: this ltng:require The directive contains jQuery and CanvasJS as dependencies.
Chart rendering: this renderChart Method initializes the CanvasJS chart within the ChartContainer div.
Chart data: Customize the dataPoints array to display the required data.

Preview and verify

• Store all files in the developer console.
• Turn on the app preview to verify that the chart renders correctly.
• Adjust the look and style of the chart as needed to meet your requirements.

This integration provides a dynamic way to use CanvasJS visuals in Salesforce Lightning. Make sure all libraries are uploaded and referenced correctly to avoid issues during deployment. For more information, see the GitHub repository: CanvasJS Lightning Halo App.