Bar Chart In Lightning Web Component Using Chartjs

Bar Chart in Lightning Web Component

Data visualization is a very important part of today's Data Science era, the executives at any company love to see the visual representation of the data, being a web standard Lightning web components gives you the ability to show charts and graphs using external libraries like ChartJs, D3 Js.

In this post, I am going to demonstrate, how you can leverage the power of ChartJs to build a responsive Bar chart in Lwc. My last post on Using ChartJs in Lwc was just a simple example with some static data, in this post, I am going to demonstrate how you can get data from Opportunity and feed it to the bar chart.

Let us assume the scenario where you want to visualize opportunity amounts of the Closed Won opportunities for the last 30 days.

Create a lightning web component named 'chart', this is the generic ChartJs implementation. You can create all different types of charts supported by ChartJs by passing different chart configurations from its parent component.

1. Download this ChartJs file(Open link -> Right Click -> Save As) and upload it into a static resource with the name ''ChartJs".

2. Create a new Lwc with the name 'chart' and copy the below codes in the respective files.

chart.js

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',
     })
    );
   });
 }
}

In the above code, I 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.

In the renderedCallback,

I have put the Chartjs source file in the static resource, with the help of platformResourceLoader loaded it in the component.

Initialized the chart js once the Chart.bundle.min.js is loaded.
chart.html

<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>

In the HTML I have added a canvas tag, the Chartjs library uses that canvas to draw the chart.

3. Now, create an apex class to fetch the Opportunity Data.

public class OpportunityChartCntrl {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getOpportunities(){
        return [SELECT Amount,Name,StageName FROM Opportunity WHERE CloseDate >= LAST_N_DAYS:30 AND StageName = 'Closed Won'];
    }
}

4. Create another lwc, here you can use your desired component. I have named it as opportunityBarChart.

opportunityBarChart.js

import {LightningElement, wire, track} from 'lwc';
import getOpportunities from '@salesforce/apex/OpportunityChartCntrl.getOpportunities';
export default class OpportunityBarChart 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 Last Week',
       barPercentage: 0.5,
       barThickness: 6,
       maxBarThickness: 8,
       minBarLength: 2,
                            backgroundColor: "green",
       data: chartData,
      },
     ],
    },
    options: {
    },
   };
   console.log('data => ', data);
   this.error = undefined;
  }
 }
}

The wire method fetches the opportunity data and feeds it into the chart lwc.

The most important thing, all the chart behavior is based on the config you set to the chart. All chart settings and data will be set using

chartConfiguration

It contains three main things

1. type: It defines the type of chart being rendered, here we have 'bar'.

2. data: Here we pass the chartlabels and chart data and other settings for the bar chart.

3. options: additional settings for Charts.

opportunityBarChart.html

<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>

In the HTML we have called the chart component and set the chart-config parameter.

So this is it, we are ready with a bar chart in lwc.
I have put all this code on the GitHub repo. Feel free to download it.

Let me know if you have any questions in the comments.
Let me know if you face any issues with this.

Your suggestions are always welcome!

Happy Coding!!

More stuff coming up, please subscribe, keep visiting!

Bar Chart In Lightning Web Component Using Chartjs

1. Download this ChartJs file(Open link -> Right Click -> Save As) and upload it into a static resource with the name ''ChartJs".

2. Create a new Lwc with the name 'chart' and copy the below codes in the respective files.

3. Now, create an apex class to fetch the Opportunity Data.

4. Create another lwc, here you can use your desired component. I have named it as opportunityBarChart.

You may also like...

48 comments:

Get new posts by email: