title: Chart.js:9352 Failed to create chart. Unable to dynamically create charts
body: <p>Hi I'm coming up to this error when trying to dynamically create some charts in my angular project. </p>
  
  <blockquote>
    <p>Chart.js:9352 Failed to create chart: can't acquire context from the
    given item</p>
  </blockquote>
  
  <pre><code>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)=&gt;{
  
     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
          },
        }
      })
     );
    });
   }
  }
  </code></pre>
  
  <p>I think the problem occurs when I want to dynamically create the charts in my html:</p>
  
  <pre><code> &lt;div class="row" *ngFor="let semester of semesters"&gt;
    &lt;div class="col-4"&gt;
     &lt;div [hidden]="!charts"&gt;
      &lt;canvas id="{{'chartStudyProgress'+semester}}" style="max-width: 30%;"&gt;{{ charts[semester] }}&lt;/canvas&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>If I declare the charts statically it works:</p>
  
  <pre><code>&lt;div class="row" &gt;
   &lt;div class="col-4"&gt;
    &lt;div [hidden]="!charts"&gt;
     &lt;canvas id="chartStudyProgress1" style="max-width: 30%;"&gt;{{ charts[1] }}&lt;/canvas&gt;
     &lt;canvas id="chartStudyProgress2" style="max-width: 30%;"&gt;{{ charts[2] }}&lt;/canvas&gt;
     &lt;canvas id="chartStudyProgress3" style="max-width: 30%;"&gt;{{ charts[3] }}&lt;/canvas&gt;
     &lt;canvas id="chartStudyProgress4" style="max-width: 30%;"&gt;{{ charts[4] }}&lt;/canvas&gt;
     &lt;canvas id="chartStudyProgress5" style="max-width: 30%;"&gt;{{ charts[5] }}&lt;/canvas&gt;
     &lt;canvas id="chartStudyProgress6" style="max-width: 30%;"&gt;{{ charts[6] }}&lt;/canvas&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there an expert who can help me create my charts dynamically?</p>