title: Is there a way to use rxjs with ng2-charts?
body: <p>I cant find a way to implement a live charts with ng2-charts.</p>
  
  <p>I get an error when I do : </p>
  
  <pre><code>&lt;div *ngIf="(lineChartData$ | async)!=null"&gt;
      ....
      &lt;canvas baseChart width="100" height="200"
        [datasets]="lineChartData$ | async" &lt;&lt;-ERROR: "Cannot read property 'data' of undefined"
         ....
      &lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I think that even if I would make it work some how, it would be the worst way to do it.</p>
  
  <hr>
  
  <p>Please recommend on any other liberies that has a build-in live charts if there is no solution to this error.</p>
  
  <hr>
  
  <p><strong>EDIT:</strong> </p>
  
  <p><strong>app.component.html:</strong></p>
  
  <pre><code>&lt;div *ngIf="(lineChartData$ | async)!=null"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
        &lt;div style="display: block;"&gt;
          &lt;canvas baseChart width="100" height="200"
                  [datasets]="lineChartData$ | async"   &lt;&lt;&lt;-- ERROR
                  [labels]="lineChartLabels"
                  [options]="lineChartOptions"
                  [colors]="lineChartColors"
                  [legend]="lineChartLegend"
                  [chartType]="lineChartType"
                  (chartHover)="chartHovered($event)"
                  (chartClick)="chartClicked($event)"&gt;&lt;/canvas&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6" style="margin-bottom: 10px"&gt;
        &lt;table class="table table-responsive table-condensed"&gt;
          &lt;tr&gt;
            &lt;th *ngFor="let label of lineChartLabels"&gt;&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr *ngFor="let d of lineChartData"&gt;
            &lt;td *ngFor="let label of lineChartLabels; let j=index"&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.component.ts:</strong></p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {Observable} from "rxjs";
  import {Store} from "@ngrx/store";
  import {AppState} from "../../redux/design/app-state";
  import {AngularFire, AuthProviders, FirebaseObjectObservable} from "angularfire2";
  import 'rxjs/add/operator/withLatestFrom';
  import {AuthActions} from "../../redux/actions/auth.actions";
  import {UserService} from "../../services/user.service";
  
  @Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
  })
  export class AppComponent implements OnInit
  {
    private lineChartData$:Observable&lt;Array&lt;any&gt;&gt;;
    constructor(private authActions: AuthActions,
                private af: AngularFire,
                private userService:UserService,
                private store:Store&lt;AppState&gt;){}
    public ngOnInit(): void {
      this.lineChartData$=Observable.interval(500)
        .map(index=&gt;[{data: [65, 59, index, 81, 56, 55, 40], label: 'Series A'},
            {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
            {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
          ]);
    }
  // lineChart
    public lineChartLabels:Array&lt;any&gt; = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
    public lineChartOptions:any = {
      animation: false,
      responsive: true,
      maintainAspectRatio: false
    };
    public lineChartColors:Array&lt;any&gt; = [
      { // grey
        backgroundColor: 'rgba(148,159,177,0.2)',
        borderColor: 'rgba(148,159,177,1)',
        pointBackgroundColor: 'rgba(148,159,177,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(148,159,177,0.8)'
      },
      { // dark grey
        backgroundColor: 'rgba(77,83,96,0.2)',
        borderColor: 'rgba(77,83,96,1)',
        pointBackgroundColor: 'rgba(77,83,96,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(77,83,96,1)'
      },
      { // grey
        backgroundColor: 'rgba(148,159,177,0.2)',
        borderColor: 'rgba(148,159,177,1)',
        pointBackgroundColor: 'rgba(148,159,177,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(148,159,177,0.8)'
      }
    ];
    public lineChartLegend:boolean = true;
    public lineChartType:string = 'line';
  
  
    // events
    public chartClicked(e:any):void {
      console.log(e);
    }
  
    public chartHovered(e:any):void {
      console.log(e);
    }
  }
  </code></pre>