How to embed ECharts to salesforce lightning web components

How to embed ECharts to salesforce lightning web components

Beautiful dashboards are incomplete without charts and creating an application with charts sometimes becomes challenging, recently I was building an application on top of the Salesforce app using Lightning web components(Lightning Web Components is the Salesforce implementation of that new breed of lightweight frameworks built on web standards). 

Since I have used the Echarts in my previous projects I was adamant to use Echarts in my new salesforce LWC app. After doing a bit of research and some trial error I was successful in embedding the Echarts to my salesforce app.

Note: In the below application I am assuming that Salesforce CLI has already been installed, if not please follow this link

1. Create a Salesforce Project

cd path/to/your/sfdx/projects
sfdx force:project:create --projectname lwc-hello-world
cd lwc-hello-world

After creating the project we need to add the lightning web component, let's name our component as hello world, this component will be added in the lwc folder which is the default structure for the salesforce app

cd force-app/main/default/lwc
sfdx force:lightning:component:create --type lwc -n helloWorld
cd force-app/main/default/lwc/helloWorld
ls
helloWorld.html  helloWorld.js  helloWorld.js-meta.xml

3 files are created inside force-app/main/default/lwc/helloWorld

• helloWorld.html 
• helloWorld.js 
• helloWorld.js-meta.xml

2. Add Static Resource for Echarts

let's navigate to the project directory where we can see the folder name staticresources

cd force-app/main/default

ls

applications  aura  classes  contentassets  flexipages  layouts  lwc  objects  permissionsets  staticresources  tabs  triggers

cd staticresources

Inside the staticresource folder, we need to add echarts.js which can be downloaded from there GitHub link

Upon adding the echarts we also need to add the Meta XML file for the echarts.js which is actually the configuration for our echarts.js so that we can tell the salesforce app about the MIME type of our added script.

The naming convention for adding Meta XML is the filename.resource-meta.xml

So let us add echarts.resource-meta.xml with the following content

Let's list our directory and check its content before proceeding further

cd force-app/main/default/staticresources

ls

echarts.js  echarts.resource-meta.xml

Moving back to our component folder lwc

cd force-app/main/default/lwc/helloWorld

ls

helloWorld.html  helloWorld.js  helloWorld.js-meta.xml

3. Embedding Echarts 

Let's add the following code to helloWorld.js, I have added comments wherever necessary for better understanding

Now add our frontend code to helloWorld.html

Note that we have targeted div.main in our javascript file

Once everything is completed you can now easily push the code to the org and see the changes.

This article is not limited to echarts we can easily add other charting libraries using the above method

If you have any confusion or query please leave a comment below.