CODEWITHSUNDEEP
angulartypescriptd3.js
ttmt
ttmt

Reputation: 4984

Angular, D3 - Cannot read property 'forEach' of undefined

I have a plunker here - https://plnkr.co/edit/3BtK3aYltU3jzV5hC9DW?p=preview

I'm trying to create a stacked bar chart in Angular using D3.

The chart data needs to be JSON data.

I found an example of a stacked Bar Chart using JSON

D3 Stacked Chart with JSON data

This is what I have based my plunker on within Angular

I'm getting the error 

ERROR TypeError: Cannot read property 'forEach' of undefined

at this point

this.data.forEach((d:any) =>{
    d.total = 0;
    this.keys.forEach((k:any) =>{
        d.total += d[k];
    })
});

I'm guessing this is a typescript issue.

How can I stop this error and display the stacked bar chart in Angular.

Upvotes: 0

Views: 7009

Answers (1)

Boulboulouboule
Boulboulouboule

Reputation: 4207

You have to initialize your keys array on declaration to avoid the error :

public keys : any[] = [];

Upvotes: 1

Related Questions