Draw Chart in LWC using chart.js

Leverage The art of Chart in our very own LWC

Reports are the soul of any business. Though Salesforce provides the power of customizable reports, it comes with limited filtering options. To solve this limitation and spice up our visuals, we have something called “ChartJS”. For any complex business reports, this shall act has a medium of simplicity, providing visual extravaganza. By using ChartJs, we can make sure that reports can be visualized much easier, also adding exponential power filters. This intern will make your business float on Cloud Nine. All these can be done in the new booming phrase “LWC”. Please find the steps below to achieve ChartJs in LWC.

First Things First:

                            ·   Download ChartJs from here.

              ·     Create the Lightning Web Component.

displayChart.html

<template>

    <div class="chart" lwc:dom="manual"></div>

    <div class='slds-box slds-theme_default'>

        <canvas class="pie-chart" width="800" height="450" lwc:dom="manual"></canvas>

    </div>

</template>

              ·        Here’s the code for displaying the Chart in LWC component.

              ·        If you find anything difficult, feel free to post the queries. 

displayChart.js

import {LightningElement,api,wire,track} from 'lwc';
import {loadScript} from 'lightning/platformResourceLoader';
import ChartJS from '@salesforce/resourceUrl/ChartJS';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import getLeadByStatus from '@salesforce/apex/LeadGraphController.getLeadByStatus';

export default class DisplayChart extends LightningElement {

    @track dataSet;
    @wire(getLeadByStatus) wiredLeads(result) {
        if (result.data) {
            this.dataSet = result.data;

            console.log(result.data);
            this.Initializechartjs();
        } else if (result.error) {

        }
    }
    @api chartjsInitialized = false;
    renderedCallback() {
        if (this.chartjsInitialized) {
            return;
        }
        this.chartjsInitialized = true;

        Promise.all([
                loadScript(this, ChartJS)
            ])
            .then(() => {
                //this.Initializechartjs();
            })
            .catch(error => {
                console.log(error.message)
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error loading chartJs',
                        message: error.message,
                        variant: 'error'
                    })
                );
            });
    }

    Initializechartjs() {
        console.log("loaded");
        var piechart;
        var ctx = this.template.querySelector(".pie-chart").getContext('2d');

        piechart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: Object.keys(this.dataSet),
                datasets: [{
                    label: 'count',
                    data: Object.values(this.dataSet),
                    backgroundColor: ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"]

                }]
            }
        });
    }

}

Last but not least the backend of the ChartJs.

LeadGraphController.cls

public with sharing class LeadGraphController {

    @AuraEnabled(cacheable = true)

    public static Map < String, Decimal > getLeadByStatus() {
        List < AggregateResult > result = [Select Count(Id) leadCount, Status st from Lead GROUP BY Status ];
        Map < String, Decimal > wrapp = new Map < String, Decimal > ();

        for (AggregateResult ar: result) {}
            wrapp.put(String.valueOf(ar.get('st')), (Decimal) ar.get('leadCount'));

        }
        return wrapp;
    }
}

Hurray you created your first chart using LWC, leveraging Chart.JS.

Output: