title: Cant assign data to ng2 piechart after receiving it in HTTP response
body: <p>My HTML markup look as follows where i am using piechart of NG2-Chart library which has dependency on chart.js:</p>
  
  <pre><code>&lt;h2&gt;Home&lt;/h2&gt;
  &lt;div style="display: block"&gt;
      &lt;canvas baseChart class="chart"
              [data]="pieChartData"
              [labels]="pieChartLabels"
              [chartType]="pie"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"&gt;
      &lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have written following code add it works perfectly fine. I can see the graph and get calls to eventhandlers too. My component code (working) looks as follows:</p>
  
  <pre><code>import {Component, OnInit, AfterViewInit, AfterContentInit} from '@angular/core';
  import {NgClass} from '@angular/common';
  
  import {PieChartData} from '../shared/pie-chart-data';
  import {HotelsService} from '../components/hotel/hotels.service';
  import {Hotel} from '../entities/hotel';
  
  
  import * as _ from 'underscore/underscore';
  
  @Component({
      selector:'home'
      , templateUrl:'app/home/home.component.html'
  })
  export class HomeComponent implements OnInit{
      hotels: Hotel[];
      hotelCountByCity; 
      data = new PieChartData();
  
      pieChartData = [];
      pieChartLabels=[];
  
      constructor(private _hotelsService: HotelsService){}
  
      ngOnInit(){
          this.getActiveHotelsByCity();        
  
          console.log("On Init");
      }
  
      // events
      public chartClicked(e:any):void {
          // TODO : should open another chart which is not decided.
      }
  
      public chartHovered(e:any):void {
          // TODO : do something
      }
  
      private getActiveHotelsByCity(){ 
          //this.data.pieChartType = "pie";
          this.pieChartLabels = ["One", "Two", "Three"]; 
          this.pieChartData = [100,200,300];
      }
  }
  </code></pre>
  
  <p>But When i try to get the data from web service and assign it to piechart, I get weird errors. My component code (not working) : </p>
  
  <pre><code>import {Component, OnInit, AfterViewInit, AfterContentInit} from '@angular/core';
  import {NgClass} from '@angular/common';
  
  import {PieChartData} from '../shared/pie-chart-data';
  import {HotelsService} from '../components/hotel/hotels.service';
  import {Hotel} from '../entities/hotel';
  
  import * as _ from 'underscore/underscore';
  
  @Component({
      selector:'home'
      , templateUrl:'app/home/home.component.html'
  })
  export class HomeComponent implements OnInit{
      hotels: Hotel[];
      hotelCountByCity; 
      data = new PieChartData();
  
  pieChartData = [];
  pieChartLabels=[];
  
  constructor(private _hotelsService: HotelsService){}
  
  ngOnInit(){
      this.getActiveHotelsByCity();        
  
      console.log("On Init");
  }
  
  // events
  public chartClicked(e:any):void {
      // TODO : should open another chart which is not decided.
  }
  
  
  
     public chartHovered(e:any):void {
          // TODO : do something
      }
  
      private getActiveHotelsByCity(){  
          this._hotelsService.getAllActiveHotels()
                                  .subscribe(
                                      res =&gt; this.hotelCountByCity =
                                                      _.countBy(
                                                          res.data.hotels
                                                          ,function(hotel: Hotel) {
                                                              return hotel.address.city;
                                                          })
                                      ,null
                                      , ()=&gt; {
                                          this.pieChartLabels = _.keys(this.hotelCountByCity);
                                          this.pieChartData = _.values(this.hotelCountByCity);
                                          console.log("Reached success part of request");
                                      }
                                  );
      }
  }
  </code></pre>
  
  <p>The stack tress for error I get at first is as follows: </p>
  
  <blockquote>
    <p>EXCEPTION: Uncaught (in promise): TypeError: Cannot set property stack
    of [object Object] which has only a getter TypeError: Cannot set
    property stack of [object Object] which has only a getter
        at assignAll (<a href="http://localhost:3000/node_modules/zone.js/dist/zone.js:704:29" rel="nofollow noreferrer">http://localhost:3000/node_modules/zone.js/dist/zone.js:704:29</a>)
        at ViewWrappedError.ZoneAwareError (<a href="http://localhost:3000/node_modules/zone.js/dist/zone.js:775:16" rel="nofollow noreferrer">http://localhost:3000/node_modules/zone.js/dist/zone.js:775:16</a>)
        at ViewWrappedError.BaseError [as constructor] (<a href="http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1104:38" rel="nofollow noreferrer">http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1104:38</a>)
        at ViewWrappedError.WrappedError [as constructor] (<a href="http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1133:20" rel="nofollow noreferrer">http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1133:20</a>)
        at new ViewWrappedError (<a href="http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:5106:20" rel="nofollow noreferrer">http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:5106:20</a>)
        at _View_HomeComponent_Host0.DebugAppView._rethrowWithContext (<a href="http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9427:27" rel="nofollow noreferrer">http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9427:27</a>)
        at _View_HomeComponent_Host0.DebugAppView.detectChanges (<a href="http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9413:22" rel="nofollow noreferrer">http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9413:22</a>)
        at ViewRef_.detectChanges (<a href="http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7398:24" rel="nofollow noreferrer">http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7398:24</a>)
        at RouterOutlet.activate (<a href="http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:3458:46" rel="nofollow noreferrer">http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:3458:46</a>)
        at ActivateRoutes.placeComponentIntoOutlet (<a href="http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2955:20" rel="nofollow noreferrer">http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2955:20</a>)
        at ActivateRoutes.activateRoutes (<a href="http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2933:26" rel="nofollow noreferrer">http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2933:26</a>)
        at eval (<a href="http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2902:23" rel="nofollow noreferrer">http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2902:23</a>)
        at Array.forEach (native)
        at ActivateRoutes.activateChildRoutes (<a href="http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2901:33" rel="nofollow noreferrer">http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2901:33</a>)
        at ActivateRoutes.activate (<a href="http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2896:18" rel="nofollow noreferrer">http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:2896:18</a>)</p>
  </blockquote>
  
  <p>I realise this is not real error after digging around on internet. I found some advise on internet to locate the real error and the real error i found was: </p>
  
  <blockquote>
    <p>"TypeError: Chart.controllers[meta.type] is not a constructor
        at Chart.Controller. (<a href="http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8508:24" rel="nofollow noreferrer">http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8508:24</a>)
        at Object.helpers.each (<a href="http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:9345:15" rel="nofollow noreferrer">http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:9345:15</a>)
        at Chart.Controller.buildOrUpdateControllers (<a href="http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8497:12" rel="nofollow noreferrer">http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8497:12</a>)
        at Chart.Controller.initialize (<a href="http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8356:7" rel="nofollow noreferrer">http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8356:7</a>)
        at new Chart.Controller (<a href="http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8339:6" rel="nofollow noreferrer">http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:8339:6</a>)
        at new Chart (<a href="http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:10684:21" rel="nofollow noreferrer">http://localhost:3000/node_modules/chart.js/dist/Chart.bundle.js:10684:21</a>)
        at BaseChartDirective.getChartBuilder (<a href="http://localhost:3000/node_modules/ng2-charts/components/charts/charts.js:73:16" rel="nofollow noreferrer">http://localhost:3000/node_modules/ng2-charts/components/charts/charts.js:73:16</a>)
        at BaseChartDirective.refresh (<a href="http://localhost:3000/node_modules/ng2-charts/components/charts/charts.js:114:27" rel="nofollow noreferrer">http://localhost:3000/node_modules/ng2-charts/components/charts/charts.js:114:27</a>)
        at BaseChartDirective.ngOnInit (<a href="http://localhost:3000/node_modules/ng2-charts/components/charts/charts.js:18:18" rel="nofollow noreferrer">http://localhost:3000/node_modules/ng2-charts/components/charts/charts.js:18:18</a>)
        at Wrapper_BaseChartDirective.detectChangesInInputProps (/ChartsModule/BaseChartDirective/wrapper.ngfactory.js:89:53)
        at _View_HomeComponent0.detectChangesInternal (/AppModule/HomeComponent/component.ngfactory.js:74:32)
        at _View_HomeComponent0.AppView.detectChanges (<a href="http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9305:18" rel="nofollow noreferrer">http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9305:18</a>)
        at _View_HomeComponent0.DebugAppView.detectChanges (<a href="http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9410:48" rel="nofollow noreferrer">http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9410:48</a>)
        at _View_HomeComponent_Host0.AppView.detectViewChildrenChanges (<a href="http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9331:23" rel="nofollow noreferrer">http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9331:23</a>)
        at _View_HomeComponent_Host0.detectChangesInternal (/AppModule/HomeComponent/host.ngfactory.js:33:8)"</p>
  </blockquote>
  
  <p>I am not sure where to go from here. I have posted issue on ng2-charts gihub repo. I am stuck and i will really appreciate your help.</p>