Update chart data in angular2-chartjs

Question

I am using angular2-chartjs to create a chart. Below is my code

Module

import { ChartModule } from 'angular2-chartjs';

View

 <div class="col-md-4">
     Login Frequency Filter
     <button (click)="handleClick($event)" type="button">Update Data</button>
 </div>
 <div class="col-md-8">

        <nb-card>
          <nb-card-header>Login Frequency</nb-card-header>
          <nb-card-body>
            <chart #loginChart id="chart" type="line" [data]="data" [options]="pieoptions"></chart>
          </nb-card-body>
        </nb-card>    
 </div>

and this is my component

 data: any;

  handleClick(event: Event) {
   this.data['datasets'][0] = [99,88,88,77];    
       }
ngAfterViewInit() {
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {

      const colors: any = config.variables;
      const echarts: any = config.variables.echarts;

      const chartjs: any = config.variables.chartjs;

      this.data = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [ {
          data: [18, 48, 77, 9, 100, 27, 40],
          label: 'Events',
          backgroundColor: NbColorHelper.hexToRgbA(colors.info, 0.3),
          borderColor: colors.info,
        },
        ],
      };    

    });
  }

I was thinking if I update the data in the button click event then it should update the data in the chart automatically which I am seeing the data getting updated but chart is not redrwan

 handleClick(updated) {
    if(updated)
    {
    // compute new data and store in this.datasets
    this.data.datasets[0].data = [99,99,99,99,99,99,99];
    // just trying refresh full variable
    this.data = this.data.slice();
    }
   }

Thanks

That's an incredibly old and outdated library. Try `ngx-charts` or just `chart.js` — Z. Bagley, Aug 04 '18 at 00:40
Thanks..I am just new to Angular and I started with this https://github.com/akveo/ngx-admin/tree/master/src/app/pages/charts/chartjs and this is where I got the chart from which I was trying to update — SP1, Aug 04 '18 at 00:54
Check out this: https://stackoverflow.com/questions/46328575/using-chart-js-on-angular-4/46328731?noredirect=1#comment89224300_46328731 (this is the proper way to import plain chart.js and stays updated). Also, try `this.data = JSON.parse(JSON.stringify(this.data));` for your current version (instead of `slice()`) and it should update. — Z. Bagley, Aug 04 '18 at 01:02
Thanks for the reply..I could see the data being updated but the chart is not redrawing at all..just line chart staying exactly same but data gets different..How can I make the chart redraw itself. — SP1, Aug 04 '18 at 01:05
If you use the library I posted up there, you call `myChart.update();` (or make it a component scoped variable `myChart: any;` and `this.myChart.update();`) which is why it's always recommended to avoid outdated libraries due to them breaking and/or missing fixes! Good luck on learning :) — Z. Bagley, Aug 04 '18 at 01:21

score 0 · Answer 1 · answered Aug 04 '18 at 02:09

You have to manually refresh as follows,

declare a variable _chart as follows,

@ViewChild(BaseChartDirective) private _chart;

you can refresh by using the following function,

 forceChartRefresh() {
    setTimeout(() => {
      this._chart.refresh();
    }, 10);
  }

and call after updating your data,

 this.forceChartRefresh();

score -1 · Answer 2 · answered Nov 16 '18 at 17:19

-1

@ViewChild("loginChart") bar: ChartComponent;

some_method(){

/* your changes... tus cambios

at the end put the following al final poner lo siguiente */ this.bar.ngOnInit(); //it should work deberia funcionar

}

answered Nov 16 '18 at 17:19

Gabriel Benavides

1

Your code doesn't seem relevant to the question. Also, the question is in English, please answer in English. – Yserbius Nov 16 '18 at 17:44

Update chart data in angular2-chartjs

2 Answers2