Display Charts in LWC Using 3 Party JS

 

Today we will see how to add different types of charts in LightningWebComponents using third party JS library.

As of Today we don't have any out of the box/base components provided by salesforce to display the charts.So we are using third party libraries.

• First we need to download Chart.js zip folder and import the zip folder to Static Resource as shown below.

• Create a new LWC and in js file of your LWC we need to import below two statements.

          import chartResource from '@salesforce/resourceUrl/Charts';

          import { loadScript } from 'lightning/platformResourceLoader';

    ->First statement is to import the static resource we uploaded and loadScript is used to load the javascript file.

Check here to know more

chartExample.html

• We need to use lwc:demo="manual" directive here.To add child elements under this we need to use this directive.
• We are displaying "bar" and "radar" chart using this component.        

  	<template>
  	<lightning-card title="Chart Example LWC">
  	<lightning-layout>
  	<lightning-layout-item size="6" padding="around-small">
  	<lightning-card title="BarChart">
  	<div class="barChart" lwc:dom="manual"></div>
  	</lightning-card>
  	</lightning-layout-item>
  	<lightning-layout-item size="6" padding="around-small">
  	<lightning-card title="RadarChart">
  	<div class="radarChart" lwc:dom="manual"></div>
  	</lightning-card>
  	</lightning-layout-item>
  	</lightning-layout>
  	</lightning-card>
  	</template>

  view raw chartExample.html hosted with ❤ by GitHub
     

chartExample.js      

• loadChartResource() method is calling  from the connectedCallback() method.In loadCharResource() method  Charts will get loaded.

           loadScript(this, chartResource + "/Chart.min.js")    

• In callBarChart() and callRadarChart() methods need to specify the type of chart and the data to show in the chart.
• Change the type to "pie" to show Pie Chart and data remains the same format.
• After forming the data insert the chart to html element using "canvas" created in insertToDOM()method.
• Supported types of charts are: line,pie,radar,bar,bubble,scatter,polar area and doughnut.

  	import { LightningElement } from 'lwc';
  	import chartResource from '@salesforce/resourceUrl/Charts';
  	import { loadScript } from 'lightning/platformResourceLoader';
  	export default class ChartExampleLWC extends LightningElement {
  	connectedCallback(){
  	this.loadChartResource();
  	}
  	loadChartResource(){
  	loadScript(this, chartResource + "/Chart.min.js")
  	.then(() => {
  	this.callBarChart();
  	this.callRadarChart();
  	})
  	.catch((error) => {
  	console.log("Error:", error);
  	});
  	}
  	callBarChart(){
  	const config = {
  	type: "bar",
  	data: {
  	datasets: [
  	{
  	data: [121,243,796,1444,5000,3985],
  	backgroundColor: ["rgb(60,179,113)", "rgb(60,179,113)","rgb(255,165,0)","rgb(0,0,255)","rgb(255,0,0)","rgb(255,0,0)"],
  	label: "COVID CASES"
  	}
  	],
  	labels: ['Australia','NewZealand','AfricaMali','Brazil','India','US']
  	},
  	options: {
  	responsive: true,
  	legend: {
  	display: false
  	},
  	animation: {
  	animateScale: true,
  	animateRotate: true
  	},
  	title: {
  	display: true,
  	text: "New Cases Today"
  	}
  	}
  	};
  	this.insertToDOM("div.barChart",config);
  	}
  	callRadarChart(){
  	const config = {
  	type: "radar",
  	data: {
  	datasets: [
  	{
  	data: [121,243,796,1444,5000,3985],
  	backgroundColor: ["rgb(60,179,113)", "rgb(60,179,113)","rgb(255,165,0)","rgb(0,0,255)","rgb(255,0,0)","rgb(255,0,0)"],
  	label: "COVID CASES"
  	}
  	],
  	labels: ['Australia','NewZealand','AfricaMali','Brazil','India','US']
  	},
  	options: {
  	responsive: true,
  	legend: {
  	display: false
  	},
  	animation: {
  	animateScale: true,
  	animateRotate: true
  	},
  	title: {
  	display: true,
  	text: "New Cases Today"
  	}
  	}
  	};
  	this.insertToDOM("div.radarChart",config);
  	}
  	insertToDOM(divclass,config) {
  	const canvas = document.createElement("canvas");
  	const chartNode = this.template.querySelector(divclass);
  	chartNode.innerHTML = "";
  	chartNode.appendChild(canvas);
  	const ctx = canvas.getContext("2d");
  	this.chart = new window.Chart(ctx, config);
  	}
  	}

  view raw chartExample.js hosted with ❤ by GitHub
     

Calling Apex Methods in LWC

Custom MultiSelectPickList in LWC