The age of Data Science nowadays places a lot of importance on data visualization. Visual representation of the data puts more impact on the user interface. But the issue is to build custom, responsive, reactive charts and graphs in salesforce. Open source is one of the best sources for this kind of solution. The ChartJs is an open source solution that powers, to create charts and graphs that are completely responsive, accessible, and reactive, giving the best performance. By using ChartJs in salesforce, we can create custom charts and graphs.
In this blog, We will see how we can leverage the power of ChartJs to build a responsive Bar chart in LWC. We will see how to pull information from an Opportunity and feed it into the bar chart.
Why use ChartJS?
The charts can be added to the pages using the App Builder’s “Standard Report Chart” component. However, the report filters can be used to display relevant data on the charts but when we have a lot of custom logic and filters to be implemented in a lightning component then the “Standard Report Chart” have filter limitations. ChartJs is a handy solution for this. Let's jump for example.
Example:-
In the example we will draw a bar chart for latest 10 Opportunity amounts whose stage is Closed won.
Step 1:- Download ChartJs library.
- Click Here to open link and right click on page and save as.
- Upload file in Static Resource with the name 'ChartJS'.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="slds-p-around_small slds-grid slds-grid--vertical-align-center slds-grid--align-center"> | |
<canvas class="barChart" lwc:dom="manual"></canvas> | |
<div if:false={isChartJsInitialized} class="slds-col--padded slds-size--1-of-1"> | |
<lightning-spinner alternative-text="Loading" size="medium" variant={loaderVariant}></lightning-spinner> | |
</div> | |
</div> | |
</template> |
HTML consist a canvas tag, the Chartjs library uses that canvas to draw the chart.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {LightningElement, api, track} from 'lwc'; | |
import chartjs from '@salesforce/resourceUrl/ChartJs'; | |
import {loadScript} from 'lightning/platformResourceLoader'; | |
import {ShowToastEvent} from 'lightning/platformShowToastEvent'; | |
export default class Chart extends LightningElement { | |
@api loaderVariant = 'base'; | |
@api chartConfig; | |
@track isChartJsInitialized; | |
renderedCallback() { | |
if (this.isChartJsInitialized) { | |
return; | |
} | |
// load static resources. | |
Promise.all([loadScript(this, chartjs)]) | |
.then(() => { | |
this.isChartJsInitialized = true; | |
const ctx = this.template.querySelector('canvas.barChart').getContext('2d'); | |
this.chart = new window.Chart(ctx, JSON.parse(JSON.stringify(this.chartConfig))); | |
this.chart.canvas.parentNode.style.height = 'auto'; | |
this.chart.canvas.parentNode.style.width = '100%'; | |
}) | |
.catch(error => { | |
this.dispatchEvent( | |
new ShowToastEvent({ | |
title: 'Error loading ChartJS', | |
message: error.message, | |
variant: 'error', | |
}) | |
); | |
}); | |
} | |
} |
Here we have declared two @api attributes in the chart component
- loaderVariant - Used to set the loader variant from the parent component.
- chartConfig - Used to pass the chart settings and data from the parent component, so that we can reuse this component for different charts.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="UTF-8"?> | |
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> | |
<apiVersion>55.0</apiVersion> | |
<isExposed>true</isExposed> | |
<targets> | |
<target>lightning__AppPage</target> | |
<target>lightning__RecordPage</target> | |
<target>lightning__HomePage</target> | |
<target>lightningCommunity__Page</target> | |
</targets> | |
</LightningComponentBundle> |
Step 3:- Create an apex class to get Opportunity data.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
public class OpportunityChartController { | |
@AuraEnabled(cacheable=true) | |
public static List<Opportunity> getOpportunities(){ | |
return [SELECT Amount,Name,StageName FROM Opportunity WHERE StageName = 'Closed Won' ORDER BY CreatedDate ASC LIMIT 10]; | |
} | |
} |
Retrieving Opportunity data.
Step 4:- Create parent LWC named 'barChartExample'.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<lightning-card title="Opportunity Bar Chart" icon-name="utility:chart"> | |
<template if:true={chartConfiguration}> | |
<c-chart chart-config={chartConfiguration}></c-chart> | |
</template> | |
</lightning-card> | |
</template> |
Calling child component chat and set chart configration.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {LightningElement, wire, track} from 'lwc'; | |
import getOpportunities from '@salesforce/apex/OpportunityChartController.getOpportunities'; | |
export default class BarChartExample extends LightningElement { | |
@track chartConfiguration; | |
@wire(getOpportunities, {}) | |
getOpportunities({error, data}) { | |
if (error) { | |
this.error = error; | |
console.log('error => ' + JSON.stringify(error)); | |
this.chartConfiguration = undefined; | |
} else if (data) { | |
let chartData = []; | |
let chartLabels = []; | |
data.forEach(opp => { | |
chartData.push(opp.Amount); | |
chartLabels.push(opp.Name); | |
}); | |
this.chartConfiguration = { | |
type: 'bar', | |
data: { | |
labels: chartLabels, | |
datasets: [ | |
{ | |
label: 'Closed Won', | |
barPercentage: 0.5, | |
barThickness: 6, | |
maxBarThickness: 8, | |
minBarLength: 2, | |
backgroundColor: "blue", | |
data: chartData, | |
}, | |
], | |
}, | |
options: { | |
}, | |
}; | |
console.log('data => ', data); | |
this.error = undefined; | |
} | |
} | |
} |
The wire method gets the opportunity data and feeds it into the chart lwc.
The most important thing is chartConfiguration, all the chart behaviour is based on the config that we set to the chart. Below are main three attributes.
- type:- It defines the type of chart being rendered, here we have 'bar'.
- data:- Here we pass the chartLabels and chartData and other settings for the bar chart.
- options:- Additional settings for chart.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="UTF-8"?> | |
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> | |
<apiVersion>55.0</apiVersion> | |
<isExposed>true</isExposed> | |
<targets> | |
<target>lightning__AppPage</target> | |
<target>lightning__RecordPage</target> | |
<target>lightning__HomePage</target> | |
<target>lightningCommunity__Page</target> | |
</targets> | |
</LightningComponentBundle> |
Output:-
If you have any questions you can reach out our Salesforce Consulting team
here.
No comments:
Post a Comment