Gauge Chart In LWC

Introduction —

I have recently used the external JS library in LWC to display a Gauge chart.

I have used chart.js and tsGauge. It’s easily available with good documentation.

You can download tsGauge at — and chartJS

Upload both libraries as a static resource.

HTML —

<template>
    <article class="slds-card">
        <div class="slds-card__body slds-card__body_inner slds-m-around_none slds-p-around_none">
            <div class="slds-grid slds-gutters">
                <div class="slds-col slds-size_1-of-3 slds-p-around_xxx-small">
                    <div class="chart" lwc:dom="manual" style="position: relative;
                        margin: auto;
                        margin-left:0;
                        width: 30vw;" lwc:ref="chart"></div>
                </div>
            </div>
        </div>
    </article>
</template>

Importing the libraries

import chartjs from "@salesforce/resourceUrl/chartJS";
import gaugejs from "@salesforce/resourceUrl/tsGauge";

Gauge Configuration

gaugeConfig = {
    type: "tsgauge",
    data: {
      datasets: [
        {
          backgroundColor: [
            "#c23934",
            "#ff9900",
            "#ffcc00",
            "#669900",
            "#027e46"
          ],
          borderWidth: 0,
          gaugeData: {
            value: 7777,
            valueColor: "#ff7143"
          },
          label: "My First Dataset",
          gaugeLimits: [0, 20, 40, 60, 80, 100]
        }
      ],
      value: "Score"
    },
    options: {
      events: [],
      showMarkers: true
    }
  };

Loading the libraries and creating the chart

async renderedCallback() {
    if (!this.isChartJsInitialized) {
      await loadScript(this, chartjs);
      await loadScript(this, gaugejs);
    } else {
      return;
    }
    this.isChartJsInitialized = true;
    try {
      this.gaugeConfig.data.datasets[0].gaugeData.value = this.score;
      this.gaugeConfig.data.datasets[0].gaugeData.valueColor =
        this.calculateValueColor();
      const canvas = document.createElement("canvas");
      this.refs.chart.appendChild(canvas);
      const ctx = canvas.getContext("2d");
      this.chart = new window.Chart(ctx, this.gaugeConfig);
      this.changeScoreValue();
    } catch (error) {
      this.error = error;
    }
  }

Now below is some custom code I have created to utilise the chart methods —

Polling to show the change in score value —

changeScoreValue() {
    this.timerId = setTimeout(() => {
      if (this.timerId) clearTimeout(this.timerId);
      if (this.score < 100) {
        this.setGaugeValue(this.score + 20);
      } else {
        this.setGaugeValue(0);
      }
      this.changeScoreValue();
    }, 4000);
  }

Dynamically changing the colour of the score —

calculateValueColor() {
    return this.score < 20
      ? "#c23934"
      : this.score < 40
      ? "#ff9900"
      : this.score < 60
      ? "#ffcc00"
      : this.score < 80
      ? "#669900"
      : "#027e46";
  }

Updating the chart with the new score —

setGaugeValue(value) {
    if (this.score !== value) {
      this.score = value;
      this.gaugeConfig.data.datasets[0].gaugeData.value = value;
      this.gaugeConfig.data.datasets[0].gaugeData.valueColor =
        this.calculateValueColor();
      this.chart.update();
    }
  }

Always clear the timer ID —

disconnectedCallback() {
    if (this.timerId) clearTimeout(this.timerId);
  }

Conclusion —

LWC is open-source and based on react.js, there are lots of things which are not out-of-box in Salesforce but using external libraries we can easily avail them.
The only difference is we need to upload the libraries rather than install them.