ng2-charts update labels and data

by

Apparently, if you do not modify the original reference to the labels array, it seems to work, at least for me. I mean, if you want a completely different set of labels, you should do something like this:

In the template:

<canvas baseChart
  [datasets]="lineChartData"
  [labels]="lineChartLabels"
  [options]="lineChartOptions"
  [chartType]="'line'"></canvas>

In the ts component:

this.lineChartLabels.length = 0;
for (let i = tempLabels.length - 1; i >= 0; i--) {
  this.lineChartLabels.push(tempLabels[i]);
}

Or, using new ECMAScript syntax:

this.lineChartLabels.length = 0;
this.lineChartLabels.push(...tempLabels);

The key is maybe the this.lineChartLabels.length = 0; statement, which practically ’empties’ your array by setting its length to 0, without modifying the reference.
Hope this helps!

More Related Contents:

  1. based on mobile number how do i get country code in javascript or anguler 2+ [duplicate]
  2. How do I return the response from an Observable/http/async call in angular?
  3. How to load external scripts dynamically in Angular?
  4. Property ‘…’ has no initializer and is not definitely assigned in the constructor
  5. Angular 5 Service to read local .json file
  6. Angular: Can’t find Promise, Map, Set and Iterator
  7. Wait for multiple promises to finish
  8. Chart.js — drawing an arbitrary vertical line
  9. Angular 2: Callback when ngFor has finished
  10. Upgrading to angular-6.x gives “Uncaught ReferenceError: global is not defined”
  11. Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?
  12. How to subscribe to an event on a service in Angular2?
  13. Angular 2 pipe that transforms JSON object to pretty-printed JSON
  14. Angular 6 – process is not defined when trying to serve application
  15. Angular url plus sign converting to space
  16. How to Pass data from child to parent component Angular
  17. ‘Access-Control-Allow-Credentials’ header in the response is ” which must be ‘true’
  18. How to ‘wait’ for two observables in RxJS
  19. Generate dynamic css based on variables angular
  20. Angular 8 – Lazy loading modules : Error TS1323: Dynamic import is only supported when ‘–module’ flag is ‘commonjs’ or ‘esNext’
  21. Angular 2 Quickstart: unexpected token
  22. Angular 2 runOutsideAngular still change the UI
  23. How to add images as labels to Canvas Charts using chart.js
  24. Angular 4 – What is the right way to “wait for operation”?
  25. How to prevent angular material mat-menu from closing?
  26. Google Sign-In for Websites and Angular 2 using Typescript
  27. Observable.forkJoin with a for loop
  28. binding data to angular checkbox
  29. How to detect firestore connection failure
  30. iframe inside angular2 component, Property ‘contentWindow’ does not exist on type ‘HTMLElement’

Leave a Comment