Lightning Web Components (LWC) Lifecycle Hooks and Using third-party JavaScript libraries

Lightning Web Components (LWC) Lifecycle Hooks and Using third-party JavaScript libraries


Sometimes we get uses cases where we need to use third-party JavaScript libraries such as C3 (, I will go through the steps needed to configure this below using a use case:

  1. Download latest C3 libraries that include .js and .css files
  2. Download latest D3 libraries that include .js files.
  3. Create static resources for each of these in Salesforce.
  4. Create LWC component that uses these to render graphs from C3.

LWC provides following lifecycle Hooks

constructor() :
This method fires when a component instance is created.
The constructor flows from parent to child.
For more information on this method

This method fires when a component is inserted into the DOM.
This method flow from parent to child. You can’t access child elements from the callbacks because they don’t exist yet
For more information on this method

Use it to perform logic after a component has finished the rendering phase.
This method flows from child to parent.
A component is usually rendered many times during the lifespan of an application.
Use Boolean field to track whether renderedCallback() has been executed and to only perform the operation if it has not been rendered.
For more information on this method
For this blog post I will focus on this method and how to use third-party library

This method fires when a component is removed from the DOM.
For more information on this method

This method captures errors in all the descendant components.
For more information on this method

Use Case

I used a use case for COVID vaccination site, where people might signup for vaccination. In our use case vaccination site remains open for certain period of times
like Campaign in Salesforce, for this reason I used Campaign object. To track daily vaccination and signups I used custom object and called it Shift
So for each day there is a corresponding shift record for the time period Campaign might be open. Each shift has start and end times and number of people signed up to get vaccinated per day. Shifts have following statuses
Open – When shift is open for signup. but not actually started administering vaccination
In Progress – Closed for signup and administration of vaccination started.
Closed – End of day when shift is closed
Suspended – If shift needs to be suspended for some reason.
Cancelled – If Shift needs to be cancelled.

For above use case I developed LWC and used carts from C3 library to display visually progress of vaccination campaign for a particular location.

Reference Code

public static  Double getPercentVacinated(String recordId) {

List<AggregateResult> aggregateResults = [SELECT SUM(Actual_Vaccinated__c)ActualVaccinated, SUM(Number_Signed_Up__c)SignedUp  FROM Shift__c WHERE Campaign__c = :recordId AND Status__c IN ('Closed','In Progress') WITH SECURITY_ENFORCED];
Integer t = ((Decimal)aggregateResults[0].get('SignedUp')).intValue();
Integer a = ((Decimal)aggregateResults[0].get('ActualVaccinated')).intValue();
Double  p = (a*100)/t;

return p;
    <lightning-card title="Actual Response (%)">
        <!-- When using these external libraries thayt manuplate DOM in a Lightning web component, use lwc:dom="manual" -->
        <div lwc:dom="manual" class="c3"></div>
        <div slot="footer">
            <lightning-badge label="In Progress"></lightning-badge>
            <lightning-badge label="Closed"></lightning-badge>
        <div class="slds-align_absolute-center" style="height:5rem">
import { LightningElement, api,wire, track, } from 'lwc';

// Import Toast
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

// To import a third-party JavaScript or CSS library, use the platformResourceLoader module.
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';

// Import Static Resources
import D3    from '@salesforce/resourceUrl/D3';
import C3    from '@salesforce/resourceUrl/C3';
import C3CSS from '@salesforce/resourceUrl/C3CSS';

// Import Custom Apex
import PercentVacinated from '@salesforce/apex/VaccinationController.getPercentVacinated';

renderedCallback() : Below is code I used to render graphs in side renderedCallback method

    * renderedCallback()
    * Perform logic after a component has finished the rendering phase
    renderedCallback() {
        if(!this.loadingInitialized) {
            this.loadingInitialized = true;
                loadScript(this, D3 ),
                loadScript(this, C3 ),
                loadStyle(this, C3CSS )           
            ]).then(() => {
                this.librariesLoaded = true;
            }).catch(error => {
                    new ShowToastEvent({
                        title: 'Error loading C3',
                        message: error.message,
                        variant: 'error',

renderGraph() : In this method use C3 library to display graph, this method is called from renderedCallback()

    * renderGraph()
    * Renders guage graph
    renderGraph() {
        this.chart = c3.generate({
            bindto: this.template.querySelector('div.c3'),
            data: {
                columns: [
                    ['Vacinated', this.percentVacinated]
                type: 'gauge',
            gauge: {
                label: {
                    show: true,
                    format: function (value, ratio) {
                        return value;
                  min: 0,
                  max: 100,
                  units: '%',
                  width: 25


            interaction: {
                enabled: false
            size: {
                height: 180

Third party libraries used