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

Solution 1

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!

Solution 2

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!

Comments

[żyńy]

unfortunately it does not work, I did everything exactly as you said

[żyńy]

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)

[Dmitri Larionov]

What do you do in the situation where you have multiple charts on a page?