Chartjs-Dynamically updating Chart.js data in angular

by

0đź‘Ť

âś…

DashboardCardComponent.ts

 //@Input() card: any;
 @Input() card$: Observable<any>;

tap the observable to fetch data and subsequent changes

ngOnInit() {
//if (this.card.type === 'line') {
//  this.lineChartData.push(this.card.value);
//}
this.card$.pipe(
 tap(data=>this.lineChartData.push(data.value))
 .subscribe() // either unsubscribe in onDestroy or use async pipe in html
 }

In your calling component GeneralStatsComponent

Subject card = new Subject() // from rsjx
card.next( ... data... ) // data fetched from api or your selection logic

GeneralStatsComponent.html

<app-dashboard-card [card$]='card' ...>

Above is just a pseudo code .. syntax needs to be reviewed.

Leave a comment