ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

Question

I get this error when Im trying to set value to my component. This is my component:

import { Component, OnChanges, Input } from '@angular/core';
import { DataService } from '../services/data.service';
import { ColorService } from '../services/color.service';
import { ChartsComponent } from '../charts/charts.component';
import * as _ from 'lodash';

@Component({
  selector: 'app-overview',
  templateUrl: './overview.component.html',
  styleUrls: ['./overview.component.scss']
})
export class OverviewComponent extends ChartsComponent  {

  public candle_ChartData = [];
  private viewLoaded = false;

  constructor(private colorService: ColorService) { 
    super();
  }

  showGraph() {
    if (this.candle_ChartData !== undefined &&
        this.candle_ChartData.length > 0 ){
      return true;
    } 
    return false;
  }

  getHeader() {
    if (this.selectedSymbol !== undefined ) {
      return this.selectedSymbol.name + " - " + this.selectedSymbol.lastPrice + this.selectedSymbol.currency;
    }
    return "";
  }

  buildChart() {
    this.candle_ChartData = [];
    this.candle_ChartData.push(['Day', 'Low', 'Opening value', 'Closing value', 'High']); 

    let temp_price = this.price;
    if (this.price.length > 0) {
      if (this.price.length > 100) {
        temp_price = _.drop(this.price, this.price.length - 100);
      }
    }

    for (let value of temp_price) {
      let date = new Date(value.time);
      let dateString
      this.candle_ChartData.push([date, value.low, value.open, value.close, value.high]);
    }
    console.log(this.candle_ChartData);
  };


  public candle_ChartOptions = {
    legend: 'none',
    bar: { groupWidth: '100%' }, // Remove space between bars.
    colors: ['#000'],
    candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#D32F2F' }, // red
      risingColor: { strokeWidth: 0, fill: '#00796B' } // green
    },
    chartArea: {
                    left: 80,
                    right: 10, // !!! works !!!
                    bottom: 80, // !!! works !!!
                    top: 20,
                    width: "100%",
                    height: "100%"
                },
      interpolateNulls: true

  };

  toggleTheme() {
    this.colorService.toggleTheme(!this.colorService.isDarkTheme());
  }

  isDarkTheme() {
    return this.colorService.isDarkTheme();
  }
}

and this is the class its extending:

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Price } from '../shared/price';
import { Symbol } from '../shared/Symbol';
import { ChartInterface } from '../interface/chart-interface';

@Component({
  selector: 'app-charts',
  templateUrl: './charts.component.html',
  styleUrls: ['./charts.component.scss']
})
export class ChartsComponent implements ChartInterface, OnChanges  {
  @Input() price: Price[];
  @Input() selectedSymbol: Symbol;

  constructor() { }

  update(price: Price[], selectedSymbol: Symbol) {
      if (price !== undefined && selectedSymbol !==undefined ) {
        this.price = price;
        this.selectedSymbol = selectedSymbol;
        this.buildChart();     
      }
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.price !== undefined && 
        changes.price.currentValue !== undefined && 
        changes.price.currentValue.length > 0 ) {
        this.buildChart();     
    }
  }

  buildChart() {
    console.log("asdsassdaads");
  }

}

and finally this is how i set the value:

let factory = this.componentFactoryResolver.resolveComponentFactory(this.type);
this.cmpRef = this.target.createComponent(factory);
(<ChartsComponent>this.cmpRef.instance).update(this.price, this.selectedSymbol);

I've been searching around and I don't really understand the error. Can I get passed it by somehow forcing a onChange or something similar?

br