DEV Community

Vishwas R
Vishwas R

Posted on

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 CanvasJS charts into your Lightning Aura components for impactful data representation.

CanvasJS in Salesforce Lightning Aura Component

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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();
    }
})
Enter fullscreen mode Exit fullscreen mode

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.

Billboard image

The fastest way to detect downtimes

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitoring.

Get started now

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay