So im using chart.js and ng2-charts to create some gauges charts for my platform to monitore the level of fluids inside a tank of a machine.

I get those values by a external API and Im runing into a problem that the Charts are being rendered before I get the values form the API.

Is there a way I can render only after I get the value from the API or force the chart to re render?

<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];
  }
}