[Chartjs]-Cannot read property 'transition' null chartjs

by

4👍

✅

A few of the glaring problems is how the length of backgroundColor and borderColor could be less than this.monthcostlabor leading to undefined values when loaded through the bard iterator.

Also, why cannot you loop within the constructor?

this.barChart = new Chart(this.barCanvas.nativeElement, {
  type: 'bar',
  data: {
    labels: this.monthcostlabor,
    datasets: this.monthcostlabor.map((elem,i) => ({ 
         label: elem, 
         backgroundColor: backgroundColor[(i % backgroundColor.length)], 
         borderColor: borderColor[(i % borderColor.length)], 
         borderWidth: 1, 
         data:[this.monthcostglobal] })); // the second push() can be included here?    
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

/*
  for(let bard = 0; bard < this.monthcostlabor.length; bard++){
  this.barChart.data.datasets.push({ label: this.monthcostlabor[bard], backgroundColor: backgroundColor[bard], borderColor: borderColor[bard], borderWidth: 1 });
}
this.barChart.data.datasets.forEach(element => {
  element.data.push(this.monthcostglobal)
});
this.barChart.update(); */

0👍

I guess the problem is related to async api calls

I solved it with :

  async setChart () {
    this.myChart = await this.apiService.setChartData(this.myChart, this.myCanvas);
    this.myChart.update();
  }


  async this.apiService.setChartData(mChart, mCanvas) {
    mChart.data = this.getChrData(mLabel, dtSets, this.colourList, this.colourBordList, cType);
    mChart.data.labels = mLabel;
    return mChart;
  }

0👍

Same issue was happened to me. I resolved it using a setTimeout(function(){chart.update()},50) but your solution is more elegant.
Nice

Leave a comment