How to use chartjs in Lightning Web Components

Hello There!!

Today, in the era of digital transformation, we believe in faster and reusable solutions. Open source is one of the best sources for this kind of solution. Here our problem is to build custom charts and graphs. To be able to build custom charts in Salesforce. We have two options from open source.

1. D3.Js
2. ChartJs

If you are looking for Bar Chart, here is the separate post.

Today we will see an example of using ChartJs in lightning web components.

Below are the steps for that.

• Download the distributed version of ChartJs from here. (Open link -> Right Click -> Save As)
• Upload the downloaded js file into the static resource with the name ChartJs
• Create a new Lightning web component with the name chartExample and put the following code into JS and HTML files respectively.

Here is the code for my component.

.js File

import { LightningElement, track } from 'lwc';
import chartjs from '@salesforce/resourceUrl/ChartJs';
import { loadScript } from 'lightning/platformResourceLoader';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';


export default class ChartExample extends LightningElement {
    @track isChartJsInitialized;
    chart;

    config = {
        type: 'line',
        data: {
            datasets: [{
                fill: false,
                label: 'Line Dataset',
                data: [{  
                    y:100,
                    x:0
                 },
                 {  
                    y:96,
                    x:10
                 },
                 {  
                    y:93,
                    x:20
                 },
                 {  
                    y:89,
                    x:30
                 },
                 {  
                    y:85,
                    x:50
                 },
                 {  
                    y:80,
                    x:60
                 },
                 {  
                    y:71,
                    x:70
                 },
                 {  
                    y:43,
                    x:80
                 },
                 {  
                    y:19,
                    x:90
                 },
                 {  
                    y:9,
                    x:100
                 },
                 {  
                    y:4,
                    x:110
                 },
                 {  
                    y:2,
                    x:120
                 },
                 {  
                    y:0,
                    x:130
                 },
                 {  
                    y: 140,
                    x:140
                 }
                 
                 ],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)'
                ],
                pointBackgroundColor: 'rgba(255, 99, 132, 0.2)',
                pointBorderColor: 'rgba(255, 99, 132, 1)'
            },
            {
                fill: false,
                label: 'Line Dataset 2',
                data: [{  
                    y:100,
                    x:0
                 },{  
                    y:98,
                    x:10
                 },{  
                    y:95,
                    x:20
                 },{  
                    y:92,
                    x:30
                 },{  
                    y:88,
                    x:50
                 },{  
                    y:84,
                    x:60
                 },{  
                    y:75,
                    x:70
                 },{  
                    y:50,
                    x:80
                 },{  
                    y:25,
                    x:90
                 },{  
                    y:14,
                    x:100
                 },{  
                    y:8,
                    x:110
                 },{  
                    y:5,
                    x:120
                 },{  
                    y:2,
                    x:130
                 }],
                backgroundColor: [
                    '#80aaff'
                ],
                borderColor: [
                    'blue'
                ],
                pointBackgroundColor: '#80aaff',
                pointBorderColor: 'blue'
            }
            ]
        },
        options: {
            title: {
                display: true,
                text: 'Sand Samples Against Comm Weight %.'
            },
            scales: {
                xAxes: [{
                    type: 'linear',
                    ticks: {
                        suggestedMin: 0,
                        suggestedMax: 140,
                        stepSize: 10
                    }
                }],
                yAxes: [{
                    type: 'linear',
                    ticks: {
                        autoSkip: true,
                        suggestedMin: 0,
                        suggestedMax: 100,
                        stepSize: 5,
                        callback: function (value) {
                            return value + '%';
                        }
                    }
                }]
            },
        }
    };

    renderedCallback() {
        if (this.isChartJsInitialized) {
            return;
        }
        this.isChartJsInitialized = true;

        Promise.all([
            loadScript(this, chartjs)
        ]).then(() => {
            const ctx = this.template.querySelector('canvas.linechart').getContext('2d');
            this.chart = new window.Chart(ctx, this.config);
            this.chart.canvas.parentNode.style.height = '100%';
            this.chart.canvas.parentNode.style.width = '100%';
        }).catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error loading ChartJS',
                    message: error.message,
                    variant: 'error',
                }),
            );
        });
    }
}

.html file

<template>
    <lightning-card title="Sand Samples" icon-name="utility:chart">
        <div class="slds-grid slds-wrap slds-grid--pull-padded">
            <div if:true={isChartJsInitialized} class="slds-col--padded slds-size--1-of-1">
                <canvas class="linechart" lwc:dom="manual"></canvas>
            </div>
            <div if:false={isChartJsInitialized} class="slds-col--padded slds-size--1-of-1">
                ChartJs Not loaded yet
            </div>
            <div class="slds-col--padded slds-size--1-of-1">
                Footer
            </div>
        </div>
    </lightning-card>
</template>

Now, add the below code to your meta-xml file after <apiVersion> tag to expose the component to the app builder, the home page, or community page.

<isExposed>true</isExposed>
<targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
    <target>lightningCommunity__Page</target>
</targets>

This is the output.

Let me know in the comments if this was helpful to you, thank you!
Happy Coding!!

You may also like...

Bar Chart In Lightning Web Component Using Chartjs

D3.js Candlesticks chart in Lightning web component

Lightning Web Components FAQ

Best 5 VS Code Extensions For Salesforce Developers

How to enable and create Dynamic Forms | Salesforce

Merge Rows in Table LWC