0

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 POSTMAN JSON 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 enter image description here

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

rosa
  • 13
  • 1
  • 8
  • 1
    Ths is more to do with Chart.js library. Check this:- https://stackoverflow.com/questions/28523394/charts-js-formatting-y-axis-with-both-currency-and-thousands-separator – Vimal Patel Dec 27 '21 at 14:47
  • Thats helped only for the yaxis labels formatting. Have can I format the dataArray ? ```callback: function(label, index, labels) {return Intl.NumberFormat().format(label); },``` Where should I add the NumberFormat function ? Thanks a lot :) – rosa Dec 28 '21 at 05:43
  • You need to look into chart.js docs for that. – Vimal Patel Dec 28 '21 at 05:46
  • 1
    Thanks a lot @VimalPatel. I solved my problem with your advice. yaxis solution https://stackoverflow.com/a/40556689/13304502 and dataArray format solution: https://stackoverflow.com/a/53231434/13304502 – rosa Dec 28 '21 at 06:08
  • No. This isn't worked for me. I added solutions links as comment. – rosa Dec 28 '21 at 12:03

0 Answers0