Hi there!

I am trying to build a gauge chart from the javascript library called Zing Chart, but it is not even is rendered. Why?

I did add the zing chart cdn as a static resource before that.

gauge_chart.html

<template>
  <lightning-card title="Gauge Chart" 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="gaugechart" lwc:dom="manual"></canvas>
          </div>
          <div if:false={isChartJsInitialized} class="slds-col--padded slds-size--1-of-1">
              Zing Chart Not loaded yet
          </div>
      </div>
  </lightning-card>
</template>

import { LightningElement, track } from "lwc";
import zingchartlib from "@salesforce/resourceUrl/zingchartlib";
import { loadScript, loadStyle } from "lightning/platformResourceLoader";
import { ShowToastEvent } from "lightning/platformShowToastEvent";

export default class GaugeChart extends LightningElement {
  @track isZingChartInitialized;

  config = {
    type: "gauge",
    globals: {
      fontSize: 25
    },
    plotarea: {
      marginTop: 100
    },
    plot: {
      size: "100%",
      valueBox: {
        placement: "center",
        text: "%v",
        fontSize: 25,
        rules: [
          {
            rule: "%v == 1000000",
            text: "%v <br> Target achieved!"
          },
          {
            rule: "%v > 750000 && %v < 1000000",
            text: "%v <br> Way to go!"
          },
          {
            rule: "%v > 500000  && %v <= 750000",
            text: "%v <br> Almost there!"
          },
          {
            rule: "%v >= 250000 && %v <= 500000",
            text: "%v <br> Keep it up!"
          },
          {
            rule: "%v < 250000",
            text: "%v <br> We just started!"
          }
        ]
      }
    },
    tooltip: {
      borderRadius: 5
    },
    scaleR: {
      aperture: 180,
      minValue: 0,
      maxValue: 1000000,
      step: 250000,
      center: {
        visible: false
      },
      tick: {
        visible: false
      },
      item: {
        offsetR: 0,
        rules: [
          {
            rule: "%i == 9",
            offsetX: 15
          }
        ]
      },
      labels: ["0", "250.000", "500.000", "750.000", "1.000.000"],
      ring: {
        size: 50,
        rules: [
          {
            rule: "%v < 250000",
            backgroundColor: "#E53935"
          },
          {
            rule: "%v >= 250000 && %v < 500000",
            backgroundColor: "#FFFF00"
          },
          {
            rule: "%v >= 500000 && %v < 750000",
            backgroundColor: "#3CB371"
          },
          {
            rule: "%v >= 750000",
            backgroundColor: "#29B6F6"
          }
        ]
      }
    },
    series: [
      {
        values: [0],
        backgroundColor: "black",
        indicator: [10, 5, 5, 5, 0.75],
        animation: {
          effect: 2,
          method: 1,
          sequence: 4,
          speed: 900
        }
      }
    ]
  };

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

    Promise.all([loadScript(this, zingchartlib)])
      .then(() => {
        zingchart.render({
          id: this.template.querySelector("canvas.gaugechart"),
          data: config,
          height: 500,
          width: "100%"
        });
      })
      .catch((error) => {
        this.dispatchEvent(
          new ShowToastEvent({
            title: "Error loading ZingChart",
            // message: error.message,
            variant: "error"
          })
        );
      });
  }
}