Ng2-charts / chart.js - how to refresh/update chart - angular 4

Question

html:

<canvas *ngIf="actionData" baseChart width=800 height=300
                                  [datasets]="lineActionData"
                                  [labels]="lineActionLabels"
                                  [options]="lineChartOptions"
                                  [colors]="lineChartColors"
                                  [legend]="lineChartLegend"
                                  [chartType]="lineChartType"
                                  (chartHover)="chartHovered($event)"
                                  (chartClick)="chartClicked($event)"></canvas>

component:

public lineChartData:Array<any> = [
    {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'},
  ];
etc

I have created a chart in html. In my *.ts file I have variables with data and options. Then I call a method which updates lineActionData. I have searched the internet but have not found how to UPDATE/REDRAW the chart. If I change the chart's type with a button (ie from line to bar and again to line), then the chart redraws itself with the new data. But how to do it straight after updating the values of data variable? All the methods that I found were not suited for my solution. Thx for help

score 9 · Answer 1 · answered May 13 '19 at 18:48

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!

score 6 · Answer 2 · answered Feb 21 '18 at 12:37

6

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!

answered Feb 21 '18 at 12:37

OArnarsson

801
1
9
25

1

unfortunately it does not work, I did everything exactly as you said – żyńy Feb 21 '18 at 13:26
1

What do you do in the situation where you have multiple charts on a page? – Dmitri Larionov Sep 17 '19 at 23:41

score 0 · Answer 3 · answered Feb 21 '18 at 14:19

0

@ViewChild(BaseChartDirective)
public chart: BaseChartDirective;

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

use update() method of chartjs

answered Feb 21 '18 at 14:19

Suhag Lapani

655
10
18

update method doesn't work, I used ngOnChanges on the chart, and it works, but it refreshes only the first chart on the page (I have more than one) – żyńy Feb 21 '18 at 15:55

score 0 · Answer 4 · answered Apr 03 '18 at 09:49

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>

score 0 · Answer 5 · answered Aug 24 '18 at 13:03

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();
    }
}};

score 0 · Answer 6 · answered May 15 '19 at 07:56

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)

Ng2-charts / chart.js - how to refresh/update chart - angular 4

6 Answers6