[Chartjs]-Ng2-charts / chart.js – how to refresh/update chart – angular 4

Please follow this and it will work!

1) Import these ones…

import { Component, OnInit, ViewChild } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';

2) Into the export class (in your ts file) add this…

@ViewChild(BaseChartDirective) chart: BaseChartDirective;

then, first you should initialize the object that contains the data and label info.
1, 1, 1 is an example, you can use 0 if want…

public barChartData: any[] = [{
    data: [1,1,1,1,1,1,1],
    label: 'this is an example'
}];

3) in your ngOnInit method add a setTimeout function, or use the call to the backend by http;

setTimeout(() => {
    this.chart.chart.data.datasets[0].data = [55, 355, 35, 50, 50, 60, 10]
    this.chart.chart.update()
}, 2000);

4) in your html file, make sure to add baseChart to the canvas tag

 <div class="chart-wrapper">
  <canvas baseChart class="chart"
  [datasets]="barChartData"
  [labels]="barChartLabels"
  [options]="barChartOptions"
  [legend]="barChartLegend"
  [chartType]="barChartType"
  [colors]="chartColors"
  (chartHover)="chartHovered($event)"
  (chartClick)="chartClicked($event)">
  </canvas>
 </div>

5) just to explore a little more, in the ngOnInit method, you can perform a console.log of (this.chart.chart) and you will find more information about the object…

Hope it helps!

You can bind the chart directive via ViewChild like so:

...
export class HomeComponent {
    @ViewChild(BaseChartDirective)
    public chart: BaseChartDirective; // Now you can reference your chart via `this.chart`


void updateChart() {
    this.chart.chart.update(); // This re-renders the canvas element.
}

Simply call updateChart every time your dataset has changed to keep your chart up to date!

@ViewChild(BaseChartDirective)
public chart: BaseChartDirective;

    ...
    this.chart.chart.update();

use update() method of chartjs

Here is Solution, after the update of data, simple barChartData = null and barChartData = “new data”.

<div style="display: block" *ngIf="barChartData">
                          <canvas baseChart
                                  [datasets]="barChartData"
                                  [labels]="barChartLabels"
                                  [options]="barChartOptions"
                                  [legend]="barChartLegend"
                                  [chartType]="barChartType"
                                  (chartHover)="chartHovered($event)"
                                  (chartClick)="chartClicked($event)"> 
                          </canvas>
                        </div>

Thats a bug in the component. You follow this path ng2-charts/charts/charts.js and change for yourself. Reference(https://github.com/valor-software/ng2-charts/issues/614)

BaseChartDirective.prototype.ngOnChanges = function (changes) {
if (this.initFlag) {
    // Check if the changes are in the data or datasets
    if (changes.hasOwnProperty('data') || changes.hasOwnProperty('datasets')) {
        if (changes['data']) {
            this.updateChartData(changes['data'].currentValue);
        }
        else {
            this.updateChartData(changes['datasets'].currentValue);
        }
        // add label change detection every time
        if (changes['labels']) { 
            if (this.chart && this.chart.data && this.chart.data.labels) {
                this.chart.data.labels = changes['labels'].currentValue;    
            }
        }
        this.chart.update();
    }
    else {
        // otherwise rebuild the chart
        this.refresh();
    }
}};

Try this

public lineChartData:Array<any> = [];       

 setTimeout(() => {
      this.lineChartData= [
     {data: [], label: ''}
     {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
     {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
     {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'},
    ];
        }, 0)

Use ngOnChanges() method.

@ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;

...

this.chart.ngOnChanges({});