Angular 16 binding highcharts as json data

In the project I am currently working on, I want to compare certain data temporally. I want to use Highcharts for this. I learned that comparisons are made by giving certain series to Highcharts. However, this data is in array form. I want to compare json data on the API I use and binding json value to highcharts data. I am waiting for help from friends who have knowledge on this subject.

Product Service getting all values:

async read(page: number = 0, size: number = 5, successCallBack?: () => void, errorCallBack?: (errorMessage: string) => void): Promise<{ totalProductCount: number; products: List_Product[] }> {
const promiseData: Promise<{ totalProductCount: number; products: List_Product[] }> = this.httpClientService.get<{ totalProductCount: number; products: List_Product[] }>({
controller: "products",
queryString: `page=${page}&size=${size}`
}).toPromise();

promiseData.then(d => successCallBack())
.catch((errorResponse: HttpErrorResponse) => errorCallBack(errorResponse.message))

return await promiseData;
}

async delete(id: string) {
const deleteObservable: Observable<any> = this.httpClientService.delete<any>({
controller: "products"
}, id);

await firstValueFrom(deleteObservable);
}


ListComponent

dataSource: MatTableDataSource<List_Product> = null;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;



async getProducts() {
this.showSpinner(SpinnerType.BallAtom);
const allProducts: { totalProductCount: number; products: List_Product[] } = await this.productService.read(this.paginator ? this.paginator.pageIndex : 0, this.paginator ? this.paginator.pageSize : 100, () => this.hideSpinner(SpinnerType.BallAtom), errorMessage => this.alertifyService.message(errorMessage, {
dismissOthers: true,
messageType: MessageType.Error,
position: Position.TopRight
}))

this.dataSource = new MatTableDataSource<List_Product>(allProducts.products);
this.paginator.length = allProducts.totalProductCount;
this.dataSource.sort = this.sort;


}


List_Product:

import { List_Product_Image } from "./list_product_image";

export class List_Product {
id: string;
productCode: string;
productName: string;
bottleType: string;
palletType: string;
palletNumber: string;
recipeCode: string;
starBbrix: number;
endBrix: number;
startCo2: number;
endCo2: number;
maschineCode:string;
maschineId:string;
expiryStartDate: Date;
expiryEndDate: Date;
nitrogen:Boolean;
weight:number;
createdDate: Date;
updatedDate: Date;
waterType:string;
waterId:string;
userName:string;
createdBy?:string;
modifiedBy?:string;
productImageFiles: List_Product_Image[];
imagePath: string;

}


Chart Example

chartOptions: Highcharts.Options = {
chart: {
type: "column",
scrollablePlotArea: {
minWidth: 1000
}
},
title: {
text: "Chart 2"
},
tooltip: {
shared: true
},
xAxis: {
scrollbar: {
enabled: false
},
categories: [
// "Jan",
// "Feb",
// "Mar",
// "Apr",
// "May",
// "Jun",
// "Jul",
// "Aug",
]
},

series: [
{
type: "line",
name: "Values",
data: this.getProducts()//I want to bind here my values.
}

]
};


My json value:

Continue reading...