Highcharts with Angular loads blank before data is received

I'm trying to integrate Highcharts into my Angular application. I am trying to pull data from the Spring backend and put it in the chart.
I tried using the Angular Highchart tags originally but couldn't get it to work.
The chart wants to load before the data is received so it just shows up as blank:

let testData1;this.tMService.getCountByHeader().toPromise().then((res: any[]) => {  testData1 = res;  this.pieChartOptions1 = {    series: [{      type: "pie",      data: testData1    }, ],  };  this.pieChart1.chart('piechart', this.pieChartOptions1);})// Service:  getCountByHeader(): Observable < any > {    return this.https.get(`${environment.apiUrl}trainingMetrics/getCountByHeader`)  }

<mat-grid-tile><mat-card style="height: 82%; width: 100%; margin-top: 2.5em;"><mat-card-content><div id='piechart'></div></mat-card-content></mat-card></mat-grid-tile>