title: Ngx-Chart does not display data
body: <p>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:</p>
  
  <pre><code>[{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}]
  </code></pre>
  
  <p>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.</p>
  
  <p>My component.ts file:</p>
  
  <pre><code>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) =&gt; {
        //console.log(response.recordset);
        for (let i = 0; i &lt; response.recordset.length; i++) {
          this.locWData.push({name: response.recordset[i].LOCATION_ID, value: response.recordset[i].AMOUNT})
        }
        console.log(this.locWData);
      });
    }
  }
  </code></pre>
  
  <p>And component.html file:</p>
  
  <pre><code>&lt;div class="col-12 chart-card”&gt;
    &lt;div&gt;
      &lt;div class="chart-card-header"&gt;
        &lt;span&gt;Location-wise Sales&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="chart-card-body bar-vertical"&gt;
        &lt;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"&gt;
        &lt;/ngx-charts-bar-vertical&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-12 chart-card"&gt;
    &lt;div&gt;
      &lt;div class="chart-card-header"&gt;
        &lt;span&gt;Location-wise Sales Distribution&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="chart-card-body pie-grid"&gt;
        &lt;ngx-charts-advanced-pie-chart *ngIf="isBrowser"
          [label]="'Points'"
          [scheme]="colorScheme"
          [results]="locWData"&gt;
        &lt;/ngx-charts-advanced-pie-chart&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>