Así que estoy usando chart.js y ng2-charts para crear algunos gráficos de indicadores para mi plataforma para monitorear el nivel de fluidos dentro del tanque de una máquina.

Obtengo esos valores mediante una API externa y me encuentro con el problema de que los gráficos se representan antes de obtener los valores de la API.

¿Hay alguna manera de que pueda renderizar solo después de obtener el valor de la API o forzar el gráfico para que se vuelva a renderizar?

 <canvas id="hotGauge" baseChart [labels]="GaugeLabels" [chartType]="GaugeType" [options]="hotGaugeOptions" [colors]="hotGaugeColors" [legend]="GaugeLegend" [data]="hotGaugeData"> @Component({ selector: 'app-machine-details', templateUrl: './machine-details.component.html', styleUrls: ['./machine-details.component.scss'], providers: [] }) export class MachineDetailsComponent implements OnInit { //This the value the Chart gets rendered with, if I equal it to 23 the chart will render 23% and not the expected value from the API hot :number; hotGaugeData: MultiDataSet=[]; constructor(private machinesService: MachinesService) { } ngOnInit() { //How I get the value from the API this.route.params.subscribe(params => { this.machinesService.getLastMachineStatusByMac(params.mac).subscribe((res) =>{ this.hot = Math.floor((res.hotWaterDistance * 100) / 200); }); }); this.setGraphData(); } setGraphData() { this.hotGaugeData=[]; this.hotGaugeData[0]=[this.hot, 100-this.hot]; } }