ng2-charts: Cannot read property 'data' of undefined

+1 i run in the same issue.

I’m using rxjs observables with angular2 and even if i provide some default empty data fot chart.data i’m still facing errors.

code very basic:

this.myService.getMyData()
      .subscribe(value=> {
        this.ChartData = [
          { data: value.data1, label: 'data1' },
          { data: value.data2, label: 'data2' }
        ];
      });

Error: Cannot read property ‘data’ of undefined

UPDATE: okey i just solved it with technic of using *ngIf. I hide chart component till i get data and then show it.

Ok, I got some time to look into this.

The issue can be reproduced by adding a setTimeout.

setTimeout(() => {
  this.datasets = [{
    label: "# of Votes",
    data: [12, 19, 3, 5, 2, 3]
  }];
}, 100);

The issue is because of lack of [{ data: [] }]; in the beginning.

In 1.2, it works this way in a child component.

@Input() datasets: any[] = [{ data: [] }];

Then you can provide data later.

But 1.3, that way does not work any more. Since I am using ngrx/store, so I changed the way to give that default data in reducer:

const initialState = {
  datasets: [{ data: [] }]
};

At least, it works now, I will close now.

@blubberbo I am using ngrx/store, so I added it in the initialState, which makes sure datasets initial value is [{ data: [] }] before getting data from server.

I’m also having this issue, although not with using initial data. When updating the chart, data including label count, I’m using ViewChild / chart.ngOnChanges(). issue ref here: #692

This works when going from a set of series to higher count, but not the other way, it throws a data undefined error.

specifically here:

BaseChartDirective.prototype.updateChartData = function (newDataValues) {
	        if (Array.isArray(newDataValues[0].data)) {
	            this.chart.data.datasets.forEach(function (dataset, i) {
	                dataset.data = newDataValues[i].data;
	                if (newDataValues[i].label) {
	                    dataset.label = newDataValues[i].label;
	                }

(current “datasets” array count differ from newDataValues)

I’m using ng2-charts 1.6.0 and chart.js 2.5.0

Any ideas of a workaround to this?

Hello! I was having the same problem (I guess). Dataset is refreshed from ngOnChanges method. Dataset can be filtered and after reducing the number of data the error Cannot read property 'data' of undefined was thrown.

I came to the @szykov solution *ngif.. as well

<div *ngIf="barChartData.length > 0">
  <canvas
    baseChart 
    [datasets]="barChartData" ...

However that wasn’t enough for me. What I did as a workaround to properly refresh the chart is clear the barCharData and wait a tick to refresh dataset:

ngOnChanges(changes) {
  this.barChartData = [];
  Promise.resolve(true).then(() => this.refresh());
}

refresh() {
  this.barChartData = ...
}

@blubberbo u need at least provide [{ data: [] }], like this Widget.chart.data = [{ data: [] }]

@nponna Unfortunately I don’t have any solid workaround, although I did modify updateChartData() in ng2-charts.js

from

	    BaseChartDirective.prototype.updateChartData = function (newDataValues) {
	        if (Array.isArray(newDataValues[0].data)) {
	            this.chart.data.datasets.forEach(function (dataset, i) {
	                dataset.data = newDataValues[i].data;
	                if (newDataValues[i].label) {
	                    dataset.label = newDataValues[i].label;
	                }
	            });
	        }
	        else {
	            this.chart.data.datasets[0].data = newDataValues;
	        }
	    };

to

	    BaseChartDirective.prototype.updateChartData = function (newDataValues) {
	        if (Array.isArray(newDataValues[0].data)) {
	            this.chart.data.datasets.forEach(function (dataset, i) {
	                if (newDataValues[i]) {  // skip if new array count is lower
	                    dataset.data = newDataValues[i].data;
	                    if (newDataValues[i].label) {
	                        dataset.label = newDataValues[i].label;
	                    }
	                }
	            });
	        }
	        else {
	            this.chart.data.datasets[0].data = newDataValues;
	        }
	    };

this seems to work without any errors and side effects, (so far…)

I have no experience in extending and modifying libraries, appreciate if anyone could guide me how to override this function so it builds with ng2-charts? Is it possible to implement this fix project-only wise without forking ng2-charts?

@valorkin Are you guys planning to handle dynamic labels and dynamic sizes of datasets anytime in the future for ng2-charts?

@szykov great idea! молодец