title: Angular 6: chartjs value not updating with dynamic value update
body: <p>I'm using <code>Angular 6</code>.</p>
  
  <p>In my <strong>component.ts</strong> file, I have to initialize graph and doing so in <strong>ngOnIt()</strong> method like this</p>
  
  <pre><code>@Component({
    selector: 'app-contact-detail',
    templateUrl: './contact-detail.component.html',
    styleUrls: ['./contact-detail.component.css']
  })
  export class ContactDetailComponent implements OnInit {
  
    contact_id: string;
    public graph_data_year;
  
    constructor(
      private activatedRoute: ActivatedRoute,
      private graphDataService: GraphDataService
    ) { }
  
    ngOnInit() {
      this.activatedRoute.params.subscribe(
        param =&gt; {
          this.contact_id = param['id'];
        }
      );
  
  
      /**
       * Get Amount Given Graph Data
       */
      this.graphDataService.get_data(this.contact_id).subscribe(
        res =&gt; {
          const data = [];
          res.forEach(e =&gt; {
            data.push(e.total);
          });
          this.graph_data_year = data;
          this._setGraphData();
        }
      );
  
      this.initializeGraph();
    }
  
    _setGraphData() {
      this.lineBigDashboardChartData[0]['data'] = this.graph_data_year;
  
      // this console here gives updated value in the console window, but no update on chart
      console.log(this.lineBigDashboardChartData);
    }
  
    /**
     * Graph
     */
    initializeGraph() {
      ...
  
      this.lineBigDashboardChartData = [
        {
          label: 'Data',
          ...
          ...
          data: this.graph_data_year
        }
      ];
      this.lineBigDashboardChartLabels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
  
      this.lineBigDashboardChartType = 'line';
    }
  
  }
  </code></pre>
  
  <p>and <strong>component.html</strong> is like</p>
  
  <pre><code>&lt;canvas baseChart id="bigDashboardChart"
     [datasets]="lineBigDashboardChartData"
     [labels]="lineBigDashboardChartLabels"
     [chartType]="lineBigDashboardChartType"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>But it does not update the chart with the updated value of <strong>graph_data_year</strong> which is updated by <strong>this.graphDataService</strong>. and shows the blank chart.</p>
  
  <p><code>console.log(this.lineBigDashboardChartData);</code> after updating data prints updated values in console window but chart data is not update.</p>
  
  <p>How can I have an async variable inside component which on the update, updates value in every place it has been used in the component? Or how can I refresh the cart after updating the data?</p>