diff --git a/demo/src/app/components/charts/line-chart-demo.ts b/demo/src/app/components/charts/line-chart-demo.ts index f6e4e9f0..eb0ccc68 100644 --- a/demo/src/app/components/charts/line-chart-demo.ts +++ b/demo/src/app/components/charts/line-chart-demo.ts @@ -13,7 +13,6 @@ export class LineChartDemoComponent { ]; public lineChartLabels:Array = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; public lineChartOptions:any = { - animation: false, responsive: true }; public lineChartColors:Array = [ diff --git a/src/charts/charts.ts b/src/charts/charts.ts index 97b037f5..2e5cba02 100644 --- a/src/charts/charts.ts +++ b/src/charts/charts.ts @@ -31,7 +31,7 @@ export class BaseChartDirective implements OnDestroy, OnChanges, OnInit { [77, 83, 96] ]; - @Input() public data:number[] | Array; + @Input() public data:number[] | any[]; @Input() public datasets:any[]; @Input() public labels:Array = []; @Input() public options:any = {}; @@ -62,14 +62,19 @@ export class BaseChartDirective implements OnDestroy, OnChanges, OnInit { } } - public ngOnChanges(changes:SimpleChanges):any { + public ngOnChanges(changes: SimpleChanges): void { if (this.initFlag) { // Check if the changes are in the data or datasets - if (changes.hasOwnProperty('data') || changes.hasOwnProperty('datasets') || changes.hasOwnProperty('labels')) { - this.chart.data.datasets = this.getDatasets(); - this.chart.data.labels = this.labels; + if (changes.hasOwnProperty('data') || changes.hasOwnProperty('datasets')) { + if (changes['data']) { + this.updateChartData(changes['data'].currentValue); + } else { + this.updateChartData(changes['datasets'].currentValue); + } + this.chart.update(); } else { + // otherwise rebuild the chart this.refresh(); } } @@ -122,6 +127,20 @@ export class BaseChartDirective implements OnDestroy, OnChanges, OnInit { return new Chart(ctx, opts); } + private updateChartData(newDataValues: number[] | any[]): void { + if (Array.isArray(newDataValues[0].data)) { + this.chart.data.datasets.forEach((dataset: any, i: number) => { + dataset.data = newDataValues[i].data; + + if (newDataValues[i].label) { + dataset.label = newDataValues[i].label; + } + }); + } else { + this.chart.data.datasets[0].data = newDataValues; + } + } + private getDatasets():any { let datasets:any = void 0; // in case if datasets is not provided, but data is present