title: ng2-chart is only refreshing when cursor is in a certain position
body: <p>I have a page in my angular2 web app where I'm displaying a list of items. Next to this is a sidebar menu.<br> 
  When one of the items in the list is selected, I'm showing an additional detail view that includes a radar chart (using <a href="https://github.com/valor-software/ng2-charts" rel="nofollow noreferrer">the ng2-charts library</a>) that binds to an array of data. Since I'm fetching the data I want to display from a database, the array is initialized using some default data and later updated using an observable:<br></p>
  
  <pre><code>public spiderChartData:any = [
      {label: "",fill:false, scaleShowLabels : false, borderWidth:5, 
      fillColor: "rgba(220,220,220,0.2)",
     data: [30,30,30,30,30]}
  ];
  constructor(private fs : FirebaseService) { }
  ngAfterViewInit() {
      this.fs.getWorkoutRatings(this.wName).valueChanges().subscribe(res =&gt; {
          this.ratings = res.map(x=&gt;x);
          console.log("data received");
          this.spiderChartData = [
              {label: "",fill:false, scaleShowLabels : false, borderWidth:5, 
              fillColor: "rgba(220,220,220,0.2)",
              data: this.ratings;
      });
  </code></pre>
  
  <p>}</p>
  
  <p>I can see from the log that the required data is received almost instantly. However, for some reason, the chart doesn't not redraw until I move the cursor over the sidebar menu; then the chart is updated instantly.<br>
  <b>I would like the chart to get updated as soon as new data is received.</b> <br> I have tried updating the chart manually or even destroying and redrawing it, but nothing so far has fixed this issue.</p>
  
  <hr>
  
  <h2>additional info</h2>
  
  <p>relevant html:<br></p>
  
  <pre><code>&lt;canvas baseChart
      [datasets]="spiderChartData"
      [labels]="spiderChartLabels"
      [chartType]="spiderChartType"
      [options]="spiderChartOptions"
      [colors]="spiderChartColours"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)"&gt;
  &lt;/canvas&gt;
  </code></pre>
  
  <ul>
  <li>I have pretty much copied all of the code for the chart from another, much simpler, project of mine which was basically just one page showing this chart. There the automatic update worked without any problems.</li>
  <li>I'm having trouble isolating a minimal working example for demonstration, but I' hoping someone will be able to help me anyway.<br></li>
  </ul>