Charts in LWC using 3rd party JavaScript library
Today, we will have a look at how to draw charts in LWC. As of today, there is no lightning component available out of the box which provides us with the ability to display charts. But the good news is that we can use third-party JavaScript libraries in LWC to display a chart. In this blog, we will see how to use a popular third party JavaScript library called Chart.js in our LWC application.
Want to try the application hands-on? Install the unmanaged package in your Salesforce developer org.
A working version of this application can be accessed here.
You need to perform the below steps in order to use any third-party library in a lightning web component:
resourceName - The name by which you want to refer the static resource in your methods
@salesforce/resourceUrl/resourceName - Here the resourceName should be the name of your static resource that you uploaded in the Salesforce org.
The platformResourceLoader has two modules - loadScript and loadStyle. The loadScript module is used to load the JavaScript file. The method returns a JavaScript promise which you need to resolve in your code. Below is an example of how to use the loadScript method:
To showcase the use of Charts.js in LWC, I will be enhancing the COVID-19 tracker application which I have posted in my last blog post. Below is the code which is relevant to chart generation. You can refer to the rest of the code by installing the unmanaged package link that I have provided at the starting of this blog post.
covidCountryInfoCharts.html:
In the below HTML, the chart will be inserted in the div tagged with class equals chart1 and chart2. Please note that it is very important to use the directive lwc:dom="manual". Adding this directive preserves the shadow DOM encapsulation and we can add child elements under this element from JavaScript. covidCountryInfoCharts.js:
Let us look at some of the important methods in this class:
loadChartScript: This method is responsible for loading the Charts. library. It first checks whether the script is already loaded or not. If the script is not loaded, it calls the loadScript method to which it passes the name of the js file (resource name + js file name). The loadScript returns a promise, inside which we call the methods responsible for plotting the chart.
insertChartToDOM: This method is responsible for DOM manipulation. In this method, we first create a canvas element. Then we query the div with class name as chart1 - this is done using template.getquerySelector. This function is similar to document.getElementByClassName. Once we get the element, we append the canvas to the element as a child node and then draw the chart by passing in the required attributes. Below is the complete code for covidCountryInfoCharts.js: covidCountryInfoCharts.css
A working version of this application can be accessed here.
You need to perform the below steps in order to use any third-party library in a lightning web component:
- Download the 3rd party library, zip the file and upload it as a Static Resource in your Salesforce org. You can download Charts.js from here. Please note that I have used version 2.7.3 because the latest version of Charts.js is not compatible with the locker service. I figured this out after spending a day getting the latest version to work in LWC. Below is the structure of the zip file uploaded as Static Resource in the Salesforce.
- In the JavaScript class file, you need to include below two imports to access the functionality of the third-party JavaScript library.
@salesforce/resourceUrl/resourceName - Here the resourceName should be the name of your static resource that you uploaded in the Salesforce org.
The platformResourceLoader has two modules - loadScript and loadStyle. The loadScript module is used to load the JavaScript file. The method returns a JavaScript promise which you need to resolve in your code. Below is an example of how to use the loadScript method:
To showcase the use of Charts.js in LWC, I will be enhancing the COVID-19 tracker application which I have posted in my last blog post. Below is the code which is relevant to chart generation. You can refer to the rest of the code by installing the unmanaged package link that I have provided at the starting of this blog post.
covidCountryInfoCharts.html:
In the below HTML, the chart will be inserted in the div tagged with class equals chart1 and chart2. Please note that it is very important to use the directive lwc:dom="manual". Adding this directive preserves the shadow DOM encapsulation and we can add child elements under this element from JavaScript. covidCountryInfoCharts.js:
Let us look at some of the important methods in this class:
loadChartScript: This method is responsible for loading the Charts. library. It first checks whether the script is already loaded or not. If the script is not loaded, it calls the loadScript method to which it passes the name of the js file (resource name + js file name). The loadScript returns a promise, inside which we call the methods responsible for plotting the chart.
insertChartToDOM: This method is responsible for DOM manipulation. In this method, we first create a canvas element. Then we query the div with class name as chart1 - this is done using template.getquerySelector. This function is similar to document.getElementByClassName. Once we get the element, we append the canvas to the element as a child node and then draw the chart by passing in the required attributes. Below is the complete code for covidCountryInfoCharts.js: covidCountryInfoCharts.css
Comments
Post a Comment