Ngx-Chart does not display data

I am currently using Ngx-Charts in my angular project. The data for my charts comes from a Node.js web service that gives the following response:

[{name: "ALB", value: 2188679.1133568},{name: "OFF", value: 1440804.2389714},{name: "SL1", value: 971553.8710496},{name: "HDS", value: 793200.8299244},{name: "YAC", value: 183228.7398208},{name: "DWK", value: 104339.702865},{name: "SS1", value: 54080.201656},{name: "SIM", value: 44772.373923},{name: "ELS", value: 755.211371}]

I am trying to parse this into an array in my component.ts file and then pass the array into the chart canvas in my component.html file. However though I am able to display the response onto the console, I am unable to display the data onto the chart. All I see are blank charts with the x and y axes but not data on them. I don’t understand where I am going wrong.

My component.ts file:

export class DashboardComponent implements OnInit{

  isBrowser: boolean;

  verticalBarOptions = {
    showXAxis: true,
    showYAxis: true,
    gradient: false,
    showLegend: true,
    showGridLines: true,
    barPadding: 25,
    showXAxisLabel: false,
    xAxisLabel: 'Country',
    showYAxisLabel: true,
    yAxisLabel: 'Sales'
  };

  locWData: any[]; 

  colorScheme = {
    domain: ['#0000FF', '#154360', '#17202A', '#21618C', '#2E86C1', '#85C1E9', '#2E86C1', '#34495E', '#21618C', '#154360']
  };

  constructor(@Inject(PLATFORM_ID) private platformId: object, private service: ReportsService) {
    this.locWData = [];
    this.isBrowser = isPlatformBrowser(platformId);
  }

  ngOnInit(): void {
    this.service.getAllLocWiseStock().subscribe((response : any) => {
      //console.log(response.recordset);
      for (let i = 0; i < response.recordset.length; i++) {
        this.locWData.push({name: response.recordset[i].LOCATION_ID, value: response.recordset[i].AMOUNT})
      }
      console.log(this.locWData);
    });
  }
}

And component.html file:

<div class="col-12 chart-card”>
  <div>
    <div class="chart-card-header">
      <span>Location-wise Sales</span>
    </div>
    <div class="chart-card-body bar-vertical">
      <ngx-charts-bar-vertical *ngIf="isBrowser"
        [scheme]="colorScheme"
        [results]="locWData"
        [gradient]="verticalBarOptions.gradient"
        [xAxis]="verticalBarOptions.showXAxis"
        [yAxis]="verticalBarOptions.showYAxis"
        [legend]="verticalBarOptions.showLegend"
        [showXAxisLabel]="verticalBarOptions.showXAxisLabel"
        [showYAxisLabel]="verticalBarOptions.showYAxisLabel"
        [xAxisLabel]="verticalBarOptions.xAxisLabel"
        [yAxisLabel]=“verticalBarOptions.yAxisLabel"
        [barPadding]="verticalBarOptions.barPadding"
        [showGridLines]="verticalBarOptions.showGridLines">
      </ngx-charts-bar-vertical>
    </div>
  </div>
</div>
<div class="col-12 chart-card">
  <div>
    <div class="chart-card-header">
      <span>Location-wise Sales Distribution</span>
    </div>
    <div class="chart-card-body pie-grid">
      <ngx-charts-advanced-pie-chart *ngIf="isBrowser"
        [label]="'Points'"
        [scheme]="colorScheme"
        [results]="locWData">
      </ngx-charts-advanced-pie-chart>
    </div>
  </div>
</div>

Solution

In this stackblitz it seems to fill the charts. even if you change the data for advance-pie-chart:

https://stackblitz.com/edit/angular-ivy-em7rez?file=src%2Fapp%2Fdashboard%2Fdashboard.component.ts