CODEWITHSUNDEEP
angulartypescriptchart.jsngfor
Jef Vandooren
Jef Vandooren

Reputation: 124

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

Hi I'm coming up to this error when trying to dynamically create some charts in my angular project.

Chart.js:9352 Failed to create chart: can't acquire context from the given item

export class StudentStudyProgressComponent implements OnInit {
  charts = [];
  semesters = [1, 2, 3, 4, 5, 6];

  constructor(private logic: LogicService) {
  }

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

  private makeDetailCharts(semesters: number[]) {
  semesters.forEach((semester)=>{

   this.charts.push(
    new Chart('chartStudyProgress' + semester, {
      type: 'doughnut',
      data: {
        labels: ['Geslaagd', 'Opgenomen', 'Resterend'],
        datasets: [
          {
            data: this.logic.giveStudyProgressForSemester(this.student.Curriculum, semester),
            borderColor: "#3cba9f",
            backgroundColor: [
              ('#66B266'),
              ('#FFFF66'),
              ('#FF7F7F')
            ]
          }
        ]
      },
      options: {
        title: {
          display: true,
          text: 'Semester '+semester
        },
        legend: {
          display: false
        },
      }
    })
   );
  });
 }
}

I think the problem occurs when I want to dynamically create the charts in my html:

 <div class="row" *ngFor="let semester of semesters">
  <div class="col-4">
   <div [hidden]="!charts">
    <canvas id="{{'chartStudyProgress'+semester}}" style="max-width: 30%;">{{ charts[semester] }}</canvas>
   </div>
  </div>
 </div>

If I declare the charts statically it works:

<div class="row" >
 <div class="col-4">
  <div [hidden]="!charts">
   <canvas id="chartStudyProgress1" style="max-width: 30%;">{{ charts[1] }}</canvas>
   <canvas id="chartStudyProgress2" style="max-width: 30%;">{{ charts[2] }}</canvas>
   <canvas id="chartStudyProgress3" style="max-width: 30%;">{{ charts[3] }}</canvas>
   <canvas id="chartStudyProgress4" style="max-width: 30%;">{{ charts[4] }}</canvas>
   <canvas id="chartStudyProgress5" style="max-width: 30%;">{{ charts[5] }}</canvas>
   <canvas id="chartStudyProgress6" style="max-width: 30%;">{{ charts[6] }}</canvas>
  </div>
 </div>
</div>

Is there an expert who can help me create my charts dynamically?

Upvotes: 0

Views: 3468

Answers (3)

Thức Trần
Thức Trần

Reputation: 137

My resolve in Angular 12:

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

and In html:

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

Upvotes: 0

Maihan Nijat
Maihan Nijat

Reputation: 9355

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

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

Upvotes: 3

Mariana Molina
Mariana Molina

Reputation: 26

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!

Upvotes: 0

Related Questions