js.Chart with error in *ngIf

Question

I am trying to implement a js.Chart graph in an ng-template linked to a *ngIf directive, but when in this condition the graph does not open and generates the error can’t Acquire context from the Given item.

Someone’s been through this trouble?

.TS

export class PesquisahistorianComponent implements OnInit {

  @ViewChild('chart', {static: true}) chart: Chart = [];

....

  async ngOnInit() {

    ...

    await this.geraToken();
    await this.retornaPesquisa();
  }


public retornaPesquisa = async () => {
    await this._api.getValuesIfix(this.tokenFinal, this._stringPost).then(returnpesq => {
      this.dadosPesquisa = returnpesq['Data'];
      this.dadosTabela = this.dadosPesquisa[0].Samples;

      this._graflabels = this.dadosTabela.map(function (e) {
        return e.TimeStamp;
      });
      this._grafdata = this.dadosTabela.map(function (e) {
        return e.Value;
      });

      this.chart = new Chart('chart', {  
        type: 'line',  
        data: {  
          labels: this._graflabels,  

          datasets: [  
            {  
              data: this._grafdata,  
              borderColor: '#3cb371',  
              backgroundColor: "#0000FF",  
            }  
          ]  
        },  
        options: {  
          legend: {  
            display: false  
          },  
          scales: {  
            xAxes: [{  
              display: true  
            }],  
            yAxes: [{  
              display: true  
            }],  
          }  
        }  
      });  

      this.isLoading = false;
    }, err => {
      console.log(err);
      this.isLoading = false;
    });
  }

.HTML

<div>
  <h3>Pesquisa dados operacionais - Base Histórica</h3>
</div>

<ng-template #rodape>
  <mat-card style="width: 90%">
    <div *ngFor="let data of dadosPesquisa">
      <p>{{data.TagName}}</p>
      <p>De: {{_dataI  | date:'dd/MM/yyyy'}} - 00:00 a {{_dataF  | date:'dd/MM/yyyy'}} - 23:59</p>
    </div>
    <div class="tabela-container">
      <table mat-table [dataSource]="dadosTabela" class="mat-elevation-z8">
        <ng-container matColumnDef="dia">
          <th mat-header-cell *matHeaderCellDef> Dia </th>
          <td mat-cell *matCellDef="let element"> {{element.TimeStamp  | date:'dd/MM/yyyy'}} </td>
        </ng-container>
        <ng-container matColumnDef="hora">
          <th mat-header-cell *matHeaderCellDef> Hora </th>
          <td mat-cell *matCellDef="let element"> {{element.TimeStamp  | date:'HH:mm'}} </td>
        </ng-container>
        <ng-container matColumnDef="Value">
          <th mat-header-cell *matHeaderCellDef> Valor </th>
          <td mat-cell *matCellDef="let element"> {{element.Value | number : '.2-2'}} </td>
        </ng-container>
        <ng-container matColumnDef="Quality">
          <th mat-header-cell *matHeaderCellDef> Qualidade </th>
          <td mat-cell *matCellDef="let element">
            <div *ngIf="element.Quality != 3; else outrovalor">
              Bad
            </div>
            <ng-template #outrovalor>
              Good
            </ng-template>
          </td>
          <td mat-footer-cell *matFooterCellDef> </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="colunasTabela"></tr>
        <tr mat-row *matRowDef="let row; columns: colunasTabela;"></tr>
      </table>
    </div>
  </mat-card>
  <br>
  <mat-card style="width: 45%">
    <table class="table table-bordered">
      <tr>
        <td colspan="2" style="text-align: center"><h4>Resumo</h4></td>
      </tr>
      <tr>
        <th>Máximo:</th>
        <td style="text-align: center"> {{_dadosMax | number : '.2-2'}} </td>
      </tr>
      <tr>
        <th>Média:</th>
        <td style="text-align: center"> {{_dadosMed | number : '.2-2'}} </td>
      </tr>
      <tr>
        <th>Mínimo:</th>
        <td style="text-align: center"> {{_dadosMin | number : '.2-2'}} </td>
      </tr>
    </table>
  </mat-card>
  <mat-card style="width: 90%">
    <canvas id="chart">{{ chart }}</canvas>    
</mat-card>
</ng-template>

<div class="container4" *ngIf="isLoading; else rodape">
  <mat-progress-spinner color="primary" mode="indeterminate">
  </mat-progress-spinner>
  <br><br>Aguarde<br>Gerando tabela de dados...
</div>

Ps: HTML is not formatted (this is a test).