Create Custom Charts in Salesforce

In this post, I am going to talk about how to create custom charts easily in Salesforce without coding. Using Lightning Web Chart.js Component, we can create custom radar charts, pie charts and many other custom charts in Salesforce easily.

Introduction

In salesforce reports, there are built in charts as this image.

But, what about if you want to create a radar charts, or pie charts?
There is a hard way, creating your own chart components with LWC using any javascript chart library or an easy way, using ready to use installable component. There are a few chart components in Salesforce AppExchange both free and paid. In this post, we are going to talk about free AppExchange chart component, Lightning Web Chart.js Component, in short LWCC. (I will refer Lightning Web Chart.js Component as LWCC from here.)

About Lightning Web Chart.js Component (LWCC)

Developed by Salesforce Labs, LWCC is a free charting component to create highly customizable charts with or without code. At the background, it use Chart js, a javascript chart library. You can check the source code and dependencies at github.

Using LWCC, you can directly create your charts from the App Builder or use in your LWC. We will focus on directly creating charts from the App Builder.

There are various types of charts you can create with this components including bar chart, line chart, pie chart, doughnut chart, stacked bar chart, bubble chart, scatter chart, radar chart, etc. You can also mix line chart and bar chart. Check their documentation for more details.

Installation

First, you need to install the component.
-> Go to AppExchange website and search for ‘Lightning Web Chart.js Component’.
-> Then click on ‘Login’ button at the top right corner of the page, choose ‘Continue with Salesforce’.
-> And login with your credentials of the targeted org you want to install.

After logged in, click on ‘Get It Now’ button and choose your org in the popup.

In my case, as I am using a trailhead playground org, I am going to choose ‘Install in Production’. You can test this component first in sandbox and then install and use in production for real project scenario.

Then follow the screen instructions. You should see the following screen and choose ‘Install for All Users’ and then click on ‘Install’.

After installed, you should see the package as follow by checking at Setup / Installed Packages.

How to use LWCC Component

You can use the component in various places. You can create charts at Home page, record detail page or dashboard. I will show you how to create charts at Home page.

You have to use SOQL query in LWCC to get data from Salesforce. So let’s prepare the query.

SELECT StageName label, SUM(Amount) value FROM Opportunity WHERE IsClosed = false WITH SECURITY_ENFORCED GROUP BY StageName LIMIT 100

For more details about how to write SOQL query, check the documentation.

Then go to Home, click on gear icon and select ‘Edit Page’.

In the components list, scroll down and find ‘LWCC App Builder’. Drag and drop the component where you want to display. You will see the chart setup at the right side bar.
-> Choose chart type at ‘Type’
-> Insert this Json array ["Opportunity Amount"] at ‘Dataset Labels’
-> Copy and paste our SOQL query prepared above at the SOQL field

Then you will see the result of the chart as follow. There are other setup as you can see but I won’t discuss many details here. Check the documentation and setup as your requirements.

After configuration, click on ‘Save’ and go back to Home. We got our custom chart now.

How to Create Radar Charts in Salesforce

Repeat the step as we discussed above and choose ‘radar’ at chart Type.

Conclusion

In this article, we have discussed about how we can create custom charts in Salesforce easily and without coding using Lightning Web Chart.js Component (LWCC). There are many more details and setups about this component that we have not discussed. Luckily, they have a very detailed documentation. Check the documentation and check if it can meet your business logics or requirements first. I am using this component in two production orgs and I could fulfill my customers’ desires. Thanks to SalesforceLabs and anyone who contribute to create this awesome component.

SAi Memo