title: using ngx-charts and loading data from an observable
body: <p>So I'm trying to make a simple bar chart like <a href="https://stackblitz.com/edit/vertical-bar-chart?embed=1&amp;file=app/app.component.ts" rel="nofollow noreferrer">this one</a> (see <a href="https://swimlane.gitbook.io/ngx-charts/examples/bar-charts/vertical-bar-chart" rel="nofollow noreferrer">documentation</a>).</p>
  
  <p>I'm getting my data from an observable and trying to run change detection in the subscription because the data isn't showing up in the chart, but change detection isn't doing the trick. How do I get the data to show up in the chart if it isn't loaded until after the view initializes? </p>
  
  <p>Here's my code: </p>
  
  <p><strong>bar-chart.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
  import { DataLoadingService } from "../data-loading.service";
  
  @Component({
    selector: 'app-bar-chart',
    templateUrl: './bar-chart.component.html',
    styleUrls: ['./bar-chart.component.scss']
  })
  export class BarChartComponent implements OnInit {
  
    subscription: any;
    data: any;
    results: any[] = [];
  
    constructor(private dataService: DataLoadingService, private ref: ChangeDetectorRef) { }
  
    ngOnInit(): void {
        this.subscription = this.dataService.source.subscribe((val: any) =&gt; {
          this.data = val.body;
          for(let x = 0; x &lt; this.data.length; x++) {
              let match = false;
              for(let y = 0; y &lt; this.results.length; y++) {
                  if (this.results[y]["name"] === this.data[x].outcome_level) {
                      match = true;
                      this.results[y]["value"] += 1;
                  }
              }
              if(match === false) {
                  this.results.push({"name": this.data[x].outcome_level, "value": 1})
              }
          }
          function compare(a: any, b: any) {
              if(a.name &gt; b.name) return 1;
              if(a.name &lt; b.name) return -1;
  
              return 0;
          }
  
          this.results.sort(compare);
          console.log(this.results);
          this.ref.detectChanges();
        } );
      console.log("from onInit: " + this.results);
    }
  </code></pre>
  
  <p>The output of the first console.log is as follows:</p>
  
  <pre><code>0: {name: "1", value: 3}
  1: {name: "2", value: 6}
  2: {name: "3", value: 1}
  3: {name: "4", value: 2}
  </code></pre>
  
  <p>The output of console.log("from onInit: " + this.results) is empty</p>
  
  <p><strong>bar-chart.component.html</strong></p>
  
  <pre><code>&lt;ngx-charts-bar-vertical
    [results]="results"
    xAxis=true
    yAxis=true
    gradient=false
    legend=true
    showXAxisLabel=true
    showYAxisLabel=true
    xAxisLabel="OutcomeLevel"
    yAxisLabel="NumberOfProjects"
  &gt;&lt;/ngx-charts-bar-vertical&gt;
  </code></pre>