How to add Angular Bar chart to Thousand Separator

Question

I am encountering an issue with an Angular Apex chart where I'm attempting to display a value with a thousand separator. Despite my code specifying a value of 800,000, the chart only shows '800' instead. How can I resolve this issue and ensure that the displayed result is '800,000'?"

my html

<div id="chart">
  <apx-chart
    [chart]="chartOptions1.chart"
    [colors]="chartOptions1.colors"
    [dataLabels]="chartOptions1.dataLabels"
    [grid]="chartOptions1.grid"
    [plotOptions]="chartOptions1.plotOptions"
    [series]="chartOptions1.series"
    [xaxis]="chartOptions1.xaxis"
  >
  </apx-chart>
</div>

.ts

export class YourComponent implements OnInit {
  public chartOptions1: Partial<ChartOptions1>;

  constructor() {
    // Preprocess data to add a thousand separator
    const originalData = [800000, 680000, 633448, 547470, 456540, 412580, 377690, 301100, 231200, 230080, 199500, 149500, 139500, 119500];

    this.chartOptions1 = {
      series: [
        {
          name: 'WIP Billing by Milestone',
          data: originalData,
        }
      ],
      chart: {
        // ... (other chart configurations)
      },
      xaxis: {
        categories: [
          'Maria Josife', 'Lilian Poilpot', 'Joe Abbott', 'Hazel Mulhare', 'Jonas Helgesson',
          'Kevin Elderfield', 'Grant Hayward', 'Jonathan Bryant', 'Sam Wilkins', 'Daniel Hyde',
          'Terry Shaw', 'Chris Warner', 'Ben Davies', 'Maddy Cross', 'Harry Tolfree',
        ],
        labels: {
          formatter(val) {
            // Add a thousand separator to the x-axis labels
            return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
          }
        },
      },
      // ... (other configurations)
    };
  }

  // ... (other methods and lifecycle hooks)
}