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

ng2-charts update data dynamically
ng2-charts update labels and data
chart.js update()
ng2-charts angular 7
ng2-charts bar chart
angular chart js line chart example
chart js change data on click
this.chart.chart.update() not working

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

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!

Ng2-charts / chart.js - how to refresh/update chart - angular 4, Ng2-charts / chart.js - how to refresh/update chart - angular 4 - angular. How to Refresh Data in Chart JS Angular? Refreshing data in the ng2-charts is as simple as assigning new values. In the above Line Chart js chart, we can refresh the data by using the lineChartData object as shown below: refreshData() { this.lineChartData[1].data = [28, 48, 140, 19, 86, 27, 90] }

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!

Calling update to refresh the chart. � Issue #291 � valor-software/ng2 , I opened an issue in the charts.js repo: chartjs/Chart.js#4695. With angular 4, I got it to work with the timeout method above: issue on Sep 27, 2018. Bug: updating datasets and labels does not refresh chart correctly #1029. If I use chart.update() as suggested by you, the animation for the removed first item does not work. If I use chart.ngOnChanges({} as SimpleChanges) the whole chart redraws. As several issues deal with change management in ng2-charts and related to this with correctly working animations, it would be helpful if you share your code. Maybe we can

@ViewChild(BaseChartDirective)
public chart: BaseChartDirective;

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

use update() method of chartjs

options should update/refresh the chart on ngOnChanges � Issue , In my case I need to set the chart's title, axis labels, etc dynamically But for some reason if I update the options Object, chartjs stops import { BaseChartDirective } from 'ng2-charts'; 4 5 ❤ 3. @dantavo. Copy link. Quote reply updated datasets for me, so I ended up forcing Angular to refresh the� This is an issue in the library ng2-charts, to resolve it I have cloned the github of ng2-charts in my app directory and have done following steps : npm install; in appmodule import ng-2charts.ts from src directory. add this updateChartLabels function to chart.ts file; call it in the onChanges function.

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>

ng2-charts-updating, 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. import { Component } from '@angular/core';. import { Router } from '@angular/router';. @Component({. selector: 'my-app',. Finally, we have completed Angular 8/9 Chart.js tutorial with ng2-charts examples. The Chart.js and ng2-charts is very easy to integrate in an Angular app. I hope you learned a lot from this tutorial and it will help you to show various data using given above charts. Click on the below button to get the full code from my GitHub repo: Git Repo

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

Using Chart.js in Angular With ng2-charts, Looking for an easy way to integrate charts in your Angular 2+ apps ng2-charts Chart.js is a popular JavaScript charting library and ng2-charts is a wrapper Chart.js is that your charts can easily by dynamic and update/respond to data Building Maps in Angular using Leaflet, Part 4: The Shape Service. Create the Chart with Static Data using ng2-charts. First, create the Angular project. Get inside the project folder and install Chart.js and ng2-charts using npm. npm install chart.js –save. followed by. npm install ng2-charts --save. Install both the libraries inside the project, where it will add some files and folders in the “node

Chart js with Angular 9|8 ng2-charts Tutorial with Line, Bar, Pie , In Angular projects, the Chart.js library is used with the ng2-charts package Open the charts > line-chart > line-chart.component.ts and update with In the above Line Chart js chart, we can refresh the data by using the Angular 9 Bootstrap 4 | Adding Toasts using ng-bootstrap Tutorial with Examples. But the idea is good, Create the chart completely new instead of update. But anyway, this issue should be fixed. The chart should update with every change. Also for ticks min, max, datasets and the other options. Currently if you work on one dataset, you can update the chart with this.chart.chart.update().

Angular 2 Charts Demo, Installation. Installation. Install ng2-charts using npm. npm install --save ng2- charts. Install Chart.js library. npm install --save chart.js� The update() triggers an update of the chart. chart.update( ).update(config) Triggers an update of the chart. This can be safely called after updating the data object. This will update all scales, legends, and then re-render the chart. A config object can be provided with additional configuration for the update process.

ng2-charts update labels and data, angular-chart.js refresh data angular 8 charts ng2-google-charts dynamic data chart js update labels angular charts free angular 4 charts example chart js data� Hi, I'm unable to update labels of a chart. I'm using ng2-charts.On the line chart example here, labels are defined with this line: public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; After this line executed I'm changing the value of lineChartLabels with 7 different strings but I can not see any changes on the chart.

Comments
  • unfortunately it does not work, I did everything exactly as you said
  • What do you do in the situation where you have multiple charts on a page?
  • 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)