Angular 16 HighCharts Not Working with API

Angular 16 does not work over the highcharts API.I can't understand exactly what mistake I made here. There is no problem with the data coming from the API. When I add data to the array myself, I see that the graph works. But I can't draw the data coming from the API. I hope you can help me with this.

Product Service:

GetProductsHighcharts(): Observable<GetProducts[]> {
return this.httpclient.get<GetProducts[]>('https://localhost:7131/api/products/').pipe(
map((data) => data),
catchError((error) => throwError(error))
);
}
errorHandler(error: HttpErrorResponse) {
return throwError(error.message || "server error.");
}


List Component:

ngOnInit() {

this.getProducts();
this.dataSource.sort = this.sort;

this.productService.GetProductsHighcharts().subscribe((data: GetProducts[]) => {
this.chartOptions = {
title: { text: 'Values' },
xAxis: {
categories: data.map(d => d.productName)
},
yAxis: {
title: { text: 'Series' }
},
series: [{
type: 'line',
data: data.map(d => d.startBrix),
name: 'startBrix'
}]
};
});
}


Highcharts: typeof Highcharts = Highcharts;
chartOptions: Highcharts.Options = {
title: {
text: 'Dynamic Data from API'
},
xAxis: {
categories: []
},
series: [
{
type: 'line',
data: []
}
]
};


Html:

<div id="container" style=" display:flex; justify-content: center; align-items: center; flex-direction: column;">
<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions">
</highcharts-chart>
<p>{{chartOptions | json}}</p>

</div>




Continue reading...