EP-34 | Polar Area Chart in Lightning Web Component | LWC Stack | Custom Charts ☁️⚡️


LWC Stack is Lightning Web Component tutorial series by Salesforce MVP Kapil Batra. In this series you will find LWC tutorials from beginner to intermediate level.

So if you are working on it or planning to learn LWC then this video series is for you. Let's learn and grow together !

In this blog you will learn how you may implement custom charts using chart.js

In this tutorial I will implement the Polar Area Chart

Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.


This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.


Official Website : https://www.chartjs.org/

JS : https://cdnjs.com/libraries/Chart.js


Why choose chart.js ? 

✔️ Simple yet flexible JavaScript charting for designers & developers

✔️ Chart.js is a community maintained project, contributions welcome!

✔️ Visualize your data in 8 different ways; each of them animated and customisable.

✔️ Great rendering performance across all modern browsers (IE11+).

✔️ Redraws charts on window resize for perfect scale granularity.


#CustomCharts #LWC #salesforce  


HTML

1
2
3
4
5
<template>
  <div class="slds-grid slds-grid--align-center" style="background: white">
    <canvas width="400" height="400"></canvas>
  </div>
</template>


JS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import { LightningElement, track } from "lwc";
import chartjs from "@salesforce/resourceUrl/ChartJs";
import { loadScript } from "lightning/platformResourceLoader";
import { ShowToastEvent } from "lightning/platformShowToastEvent";

export default class PolarAreaChart extends LightningElement {
  chart;
  config = {
    type: "polarArea",
    data: {
      labels: ["Red", "Green", "Yellow", "Grey", "Blue"],
      datasets: [
        {
          label: "My First Dataset",
          data: [11, 16, 7, 3, 14],
          backgroundColor: [
            "rgb(255, 99, 132)",
            "rgb(75, 192, 192)",
            "rgb(255, 205, 86)",
            "rgb(201, 203, 207)",
            "rgb(54, 162, 235)"
          ]
        }
      ]
    }
  };

  renderedCallback() {
    Promise.all([loadScript(this, chartjs)])
      .then(() => {
        const ctx = this.template.querySelector("canvas");
        this.chart = new window.Chart(ctx, this.config);
      })
      .catch((error) => {
        this.dispatchEvent(
          new ShowToastEvent({
            title: "Error",
            message: error.message,
            variant: "error"
          })
        );
      });
  }
}


Output



Checkout complete video tutorial below 

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)

Post a Comment

0 Comments