cant update ng2 chart values as expected

I have a chart component which uses "chart.js": "^2.4.0", "ng2-charts": "^1.5.0" and it works well. My problem is at the bottom, for now I will show my code. My Barchart component html is…

{{barChartTitle}}

My typescript for my barchart component is…

import { Component, Input, OnInit, NgZone, OnChanges, ViewChild } from '@angular/core';
@Component({
  selector: 'app-bar-chart-demo',
  templateUrl: './bar-chart-demo.component.html',
  styleUrls: ['./bar-chart-demo.component.css'],
  inputs:['chartLabel', 'chartData', 'chartType', 'chartTitle', 'chartLarge']
})
export class BarChartDemoComponent{
  @ViewChild(BaseChartDirective) chart: BaseChartDirective;

  public barChartOptions:any = {
    scaleShowVerticalLines:false,
    responsive:true
  };
  //Labels
  public barChartLabel:string[];
  @Input() chartLabel:string[];

  //Type
  public barChartType:string;
  @Input() chartType:string;

  //Legend
  public barChartLegend:boolean = true;
  @Input() chartLegend:boolean;

  //Data
  public barChartData:any[];
   @Input() chartData:string[];

  //Title
  public barChartTitle:string;
  @Input() chartTitle:string;

  //Legend
  public barChartLarge:boolean = true;
  @Input() chartLarge:boolean;

  ngOnChanges(){
  this.barChartTitle=this.chartTitle;

  //set data
  this.barChartData=this.chartData;
  //set labels
  if(!this.chartLarge){
    this.barChartLabel=this.shortenArrayStringValues(this.chartLabel);
  }
  this.chart.labels = this.shortenArrayStringValues(this.chartLabel);
  this.chart.ngOnChanges({});
       this.barChartLabel=this.chartLabel;
     this.barChartData=this.chartData;
     this.barChartType=this.chartType;
     this.barChartTitle=this.chartTitle;
  } 

  ngOnInit(){
    //Init the sub componenets
     this.barChartLabel=this.chartLabel;
     this.barChartData=this.chartData;
     this.barChartType=this.chartType;
     this.barChartTitle=this.chartTitle;
  }
}

I instantiate the component in HTML like this….

I populate these values in my calling app.component

chart1Data:any[] = [
  {data: ["NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", 
  "NULL", "NULL", "NULL"], type: 'bar'}];

And re-populate them on calling a RESTful api… no problems.

Now my problem is if I initially populated my chart1Data:any[] var with 2 objects the graph will show 2 bars as expected however if I want to change this after I get data from my API (or even manually change it in API subscribe it only repopulates the original variable.

Eg I instatiate

chart1Data:any[] = [
  {data: ["NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", "NULL", 
  "NULL", "NULL", "NULL"], type: 'bar'}];

And update it in subscribe with

this.chart1Data = [ {data: [0, 0, 0, 7, 0, 0, 0, 0, 0], label: 'GL PPM', type: 'bar'}, {data: [96, 96, 96, 96, 96, 96, 96, 96, 96], label: 'Target:96%', type: 'line'} ];

I see my this.chart1Data:any[] update but my chart shows 1st data object values but not second ie {data: [0, 0, 0, 7, 0, 0, 0, 0, 0], label: 'GL PPM', type: 'bar'},