+ Start a Discussion
Cris9931Cris9931 

window.Chart is not a constructor - error in LWC

I created a LWC chart and for whatever reason I have this error.. but only for some records and I don't know why.
 
import { api, LightningElement, track } from 'lwc';
import chartJS from '@salesforce/resourceUrl/chart';
import { loadScript } from 'lightning/platformResourceLoader';
import getChartDetail from '@salesforce/apex/RenderChart.getChartDetail';
import { ShowToastEvent } from "lightning/platformShowToastEvent";

export default class myRadarChart extends LightningElement {
    @api recordId;
    @track chartData = [];
    @track chartLabel = [];
    getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
    connectedCallback(){
        loadScript(this, chartJS + "/Chart.min.js")
      .then(() => {
      
      })
    .catch((error) => {
      console.log("Error:", error);
    });
    getChartDetail({
      oppId : this.recordId
    }).then(result => {
      var tempresult = JSON.parse(JSON.stringify(result));
      this.chartLabel = ["Power","Collaborate","CRTA","Pain","Value","Vision"];
      this.chartData = [];
      for(let temp of tempresult){
        let color = this.getRandomColor();
        let tempdata = [];
        tempdata.push(temp.Power_no_concat__c);
        tempdata.push(temp.Collaborate_no_concat__c);
        tempdata.push(temp.Compelling_Reason_to_Act_CRTA_no_concat__c);
        tempdata.push(temp.Pain_no_concat__c);
        tempdata.push(temp.Value_no_concat__c);
        tempdata.push(temp.Vision_no_concat__c);
        let chartMap = {
          label: temp.Name,
          borderColor: color,
          fill: false,
          pointHoverBackgroundColor: color,
          backgroundColor: "rgba(255,255,255, 0)",
          data: tempdata
        }
        this.chartData.push(chartMap);
      }
      this.callRadarChart();
    }).catch(error => {
      console.error('Error in RenderChart.getChartDetail' + error);
      this.dispatchEvent(new ShowToastEvent({
          title: "Error",
          message: error,
          variant: "error",
          mode: "dismissable"
        }));
      });
    }
    callRadarChart(){
      let config = {
        type: 'radar',
        data: {
          labels: this.chartLabel,
          datasets: this.chartData
        },
        options:{
          legend: {
            display: true,
            position: 'right',
            align: 'center',
            labels: {
              usePointStyle: true,
            }
          }
        }
      };
      this.insertToDOM("div.radarChart",config);
    }
    
    
    insertToDOM(divclass,config) {
      const canvas = document.createElement("canvas");
      const chartNode = this.template.querySelector(divclass);
      chartNode.innerHTML = "";
      chartNode.appendChild(canvas);
      const ctx = canvas.getContext("2d");
      this.chart = new window.Chart(ctx, config);

    }
}


apex class:

public with sharing class RenderChart {
    @AuraEnabled(cacheable=true)
    public static List<Sales_Check__c> getChartDetail(String oppId) {
        Map<String,Decimal> mapnumberfields = new Map<String,Decimal>();
        List<Sales_Check__c> salesCheckList = [SELECT Id, Name,Collaborate_no_concat__c, Compelling_Reason_to_Act_CRTA_no_concat__c, Pain_no_concat__c, Value_no_concat__c, Vision_no_concat__c, Power_no_concat__c FROM Sales_Check__c Where Opportunity__c =:oppId];
        return salesCheckList;   
    }
}

 

This is the error i'm getting it:

User-added image

Why i'm getting this error?

SwethaSwetha (Salesforce Developers) 
HI Cristian,
You ask seems similar to https://stackoverflow.com/questions/41967063/uncaught-typeerror-chart-is-not-a-constructor-when-using-chart-js

https://salesforce.stackexchange.com/questions/286581/while-creating-chart-in-lwc-using-chart-js-getting-error

Can you change the Script as suggested in the post to see if it fixes the issue?

Hope this helps you. Please mark this answer as best so that others facing the same issue will find this information useful. Thank you