Estoy trabajando en un proyecto Angular, donde quiero completar algunos gráficos con datos que recibo de Firebase. Como tengo que hacer una función asíncrona, los datos llegan DESPUÉS de cargar el gráfico, por lo que no muestra nada.

Mi código es el siguiente:

detalle.componente.html

 <div class="container mt-4"> <div class="card"> <div class="card-body"> <div class="container d-flex"> <span class="h3">Employee detail</span> </div> <div> <div> <div style="display: block"> <canvas baseChart [data]="doughnutChartData" [type]="doughnutChartType"> </canvas> </div> </div> </div> </div> </div> </div>

detalle.componente.ts

 import class DetailComponent implements OnInit { empHoursLearning!: number; empHProject1!: number; empHProject2!: number; public doughnutChartLabels: string[] = [ 'Hours learning', 'Hours Project 1', 'Hours Project 2' ]; public doughnutChartData: ChartData<'doughnut'> = { labels: this.doughnutChartLabels, datasets: [ { data: [this.empHoursLearning, this.empHProject1, this.empHProject2], backgroundColor: ['#7DFF93', '#36A2EB', '#FFCE56'], hoverBackgroundColor: '#E6E6E6', hoverBorderColor: '#E6E6E6', }, ], }; public doughnutChartType: ChartType = 'doughnut'; @ViewChild(BaseChartDirective) chart?: BaseChartDirective; ngOnInit(): void { this.getEmpleados(); } async getEmployee() { await this._employeeService.getEmployee().then((employees) => { this.empHoursLearning= employees!['hl']; this.empHProject1= empleados!['p1']; this.empHProject2= empleados!['p2']; }); } }

Mi pregunta es cómo hacer que el gráfico se represente una vez que se reciben todos los datos.