Chartjs-Chart.js:9352 Failed to create chart. Unable to dynamically create charts

by

3👍

✅

You are trying to get canvases before they are created in the view. Use ngAfterViewInit instead of ngOnInit:

ngAfterViewInit() {
  this.makeDetailCharts(this.semesters);
}

0👍

I’m not an expert, but I think that is not how you should declarate the charts. Instead I would call it like this:

<canvas
        id="{{'chartStudyProgress'+semester}}"
        [data]="chartData"
        [labels]="chartLabels"
        [chartType]="chartType"
        [legend]="chartLegend"
        [colors]="chartColors"
        [options]="chartOptions">
</canvas>

Then, I would declarate those variables in the ts file.
For example:

this.chartData = this.logic.giveStudyProgressForSemester(this.student.Curriculum, semester); 
this.chartType = 'doughnut';
this.chartColors = [
            {
                backgroundColor: [('#66B266'), ('#FFFF66'), ('#FF7F7F')],
                borderColor: "#3cba9f"
            }
        ];
this.chartOptions = {
    title: {
      display: true,
      text: 'Semester '+semester
    },
    legend: {
      display: false
    }
}

Let me know if it was useful. Good luck!

0👍

My resolve in Angular 12:

const ctx = document.getElementById(id);
if (!ctx) return;

and In html:

<canvas id="{{id}}"></canvas>

Leave a comment