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

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.

[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()

[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.