How do I format Api fetched number data with commas in Angular/Typescript? [duplicate]

I have api fetch number datas which in json format and I put them in an array. I am showing dataLabelArray and dataArray in a line charts(chart.js). But I couldn't add to the numbers the commas. When I add the comma json format chart isn't showing. I tried to the use number formatting pipes but I didn' get any result.

I have dataArray like ['4311185.190000001','12222280.9699999995','1879801.44','1745724.279999999']

I want to array like ['4,311,185.190000001','12,222,280.9699999995','1,879,801.44','1,745,724.279999999']

POSTMAN RESULT
​

service.ts
​

getTopProjects():Observable<any[]>{
return this.http.get<any>(this.APIUrl+'/..../GetProjects')
}

component.ts
​

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Data } from '@angular/router';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
import { SharedService } from '../../../@core/utils/shared.service';
import { Chart } from 'chart.js';

@Component({
selector: 'ngx-chartjs-bar-horizontal',
template: `<canvas id="barProjectcanvas"></canvas>`,

})
export class ChartjsBarHorizontalComponent implements OnDestroy,OnInit {
options: any;
data: Data[];
dataLabelProject = [];
dataArrayProjectProfit = [];
chart = [];
themeSubscription: any;

constructor(private service: SharedService,private theme: NbThemeService) {}
ngOnInit():void{
this.themeSubscription = this.theme.getJsTheme().subscribe(config => {

const colors: any = config.variables;
const chartjs: any = config.variables.chartjs;
this.service.getTopProjects().subscribe((result: Data[]) =>
{ result.forEach(x => {
this.dataLabelProject.push(x.PROJE_KODU);
this.dataArrayProjectProfit.push(x.TUTAR);
});


this.chart = new Chart('barProjectcanvas',{
type: 'bar',
data:{
labels:this.dataLabelProject,
datasets: [{
label: 'Projects',
backgroundColor: NbColorHelper.hexToRgbA(colors.successLight, 0.8),
borderColor: colors.success,
data: this.dataArrayProjectProfit,
}],
},

options : {
responsive: true,
maintainAspectRatio: false,
elements: {
rectangle: {
borderWidth: 2,
},
},
scales: {
xAxes: [
{
gridLines: {
display: true,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
yAxes: [
{
gridLines: {
display: false,
color: chartjs.axisLineColor,
},
ticks: {
fontColor: chartjs.textColor,
},
},
],
},
legend: {
position: 'top',
labels: {
fontColor: chartjs.textColor,
},
},
},
});
});
});
}


ngOnDestroy(): void {
this.themeSubscription.unsubscribe();
}

}

Output Chart
​

I want to add commas yaxislabel and the datas. Thank you in advance !

Continue reading...