Angular 2 - Dynamically modifying nvd3 data does not reflect on the chart

[expy]

I'm having a weird issue where I'm dynamically changing the data passed to the nvd3 component as "data". I'm initializing the data as follow: data = [{ values: [{x: 0, y: 0}], key: 'DATA'}];

And afterwards I'm updating the data by pushing new values into the data[0].values array. data[0].values.push({ x: x, y: 'DATA});

Problem is that the Chart doesn't update when doing so, and I can't figure out why at all.

Any help would be appreciated.

[nicoabie]

Have you tried calling update as shown in the readme? https://github.com/krispo/ng2-nvd3 this.nvD3.chart.update()

[matthias-herrmann]

@nicoabie Property nvD3 does not exist where and how do I need to declare it?

[MumblesNZ]

@3xpla1n I had a similar issue. I defined a reference variable for the nvd3 component like this:

<nvd3 #nvd3 [options]="options" [data]="data"></nvd3>

& then referenced it in my component like this:

@ViewChild('nvd3') nvd3;

Which should then give you access to your update command:

this.nvd3.chart.update()

[neverovski]

@MumblesNZ Thank you

[aspergillusOryzae]

@MumblesNZ @nicoabie I did the code above as suggested, but am receiving the following error: ERROR TypeError: Cannot read property 'chart' of undefined Do you have any additional suggestions? I put this.nvd3.chart.update(); at the end of my ngOnChanges(){} lifecycle hook. For clarification I also tried:

<nvd3 #nvd3Chart [options]="options" [data]="data"></nvd3>

in my html file, and

@ViewChild('nvd3') nvd3Chart;
...
ngOnChanges() {
    ...
    this.nvd3Chart.chart.update();
}

in my component.ts file. I put all the lifecycle hooks in and they all return undefined for nvd3Chart, even after the graph is rendered.

[Prashanth-Thomas]

@MumblesNZ is there a way to update both "options" and "data"???

when this.nvd3.chart.update() runs only the data array is considered for the update.

any solution to this?

[MumblesNZ]

@aspergillusOryzae I think you need to pass your reference variable into your @ViewChild, so if your reference variable is #nvd3Chart then you need to pass in @ViewChild('nvd3Chart') nvd3Chart;.

@Prashanth-Thomas it looks like the options update with the ngOnChanges lifecycle hook when you change the local options variable, might be worth looking into. I've started using another graphing package so don't have my head around this library anymore.

[meenu1]

when calling this.nvd3.chart.update() getting following error:

d3.js:670 Error: attribute transform: Expected number, "translate(NaN,0)". core.js:1448 ERROR TypeError: Cannot read property 'chart' of undefined

[renanfranca]

Thank you @MumblesNZ

On angular12 I had to do this:

• component.html: <nvd3 [options]="napOptions" [data]="napData"></nvd3> <nvd3 [options]="breastFeedOptions" [data]="breastFeedData"></nvd3>
• component.ts: import { AfterViewInit, ViewChild } from '@angular/core'; @ViewChild(NvD3Component) nvD3Component: NvD3Component | undefined; if (this.nvD3Component !== undefined) { this.nvD3Component.chart.update(); }

Update both graphics.

https://www.digitalocean.com/community/tutorials/angular-viewchild-access-component