title: Chart.js scatter chart stops working after extending to multiple datasets
body: <p>I'm trying to build a line chart displaying temperature data on y axis and dates on x axis in an Angular 5 app using Chart.js. I have data from five cities and would like to plot all on one chart. Generating the chart goes well when using just one city's data, but expanding to include other cities fails.</p>
  
  <p>I use this to generate the dataset from the data I pull from my API:</p>
  
  <pre><code>private createDataset(observations) {
      let temperatures = observations.map(obs =&gt; obs.temperature);
      let dates = observations.map(obs =&gt; obs.date);
  
      let data = [];
      temperatures.forEach((temperature, i) =&gt; {
        data.push({
          x: dates[i],
          y: temperature,
        });
      });
  
      return { data: data, showLine: true };
    }
  </code></pre>
  
  <p>And this to create a chart with a single dataset (works):</p>
  
  <pre><code>ngOnInit() {
  
    // No need for this with single dataset
    this.loaded = true;
  
    this.observationService.getHelsinki()
      .subscribe(observations =&gt; {
        let data = {
          datasets: [this.createDataset(observations)],
        };
  
        let options = {
          scales: {
            xAxes: [{
              type: 'time',
            }],
          },
        };
  
        this.chart = new Chart('temperatureChart', { type: 'scatter', data: data, options: options });
      });
  
  }
  </code></pre>
  
  <p>Finally, I try to extend to all datasets like so:</p>
  
  <pre><code>ngOnInit() {
  
    this.locationService.getAll()
      .subscribe((locations: any) =&gt; {
        this.loaded = false;
        let datasets = [];
  
        locations.forEach((location: any) =&gt; {
          this.observationService.getAllByLocation(location)
            .subscribe(observations =&gt; {
              datasets.push(this.createDataset(observations));
            });
        });
  
        let data = {
          datasets: datasets,
        };
  
        let options = {
          scales: {
            xAxes: [{
              type: 'time',
            }],
          },
        };
  
        this.chart = new Chart('temperatureChart', { type: 'scatter', data: data, options: options });
        this.loaded = true;
      });
  
  }
  </code></pre>
  
  <p>For template, I use:</p>
  
  <pre><code>&lt;div *ngIf="chart" [hidden]="!loaded"&gt;
    &lt;canvas id="temperatureChart"&gt;
      {{ chart }}
    &lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The variable <code>this.loaded</code> is used, possibly as a hack, to get rid of <code>ERROR TypeError: Cannot read property 'transition' of null</code> when loading the page. When trying to use multiple datasets I either get this error and no chart at all, or no error and an empty chart.</p>
  
  <p>Any help would be greatly appreciated! Chart.js looks pretty awesome, so I guess I don't just get something here. Please note that I use the <code>{ x: ..., y: ... }</code> objects to represent data because the observations will be at different times and thus it's not possible to have a single <code>labels</code> array.</p>