Angular 2 - Dynamically modifying nvd3 data does not reflect on the chart
See original GitHub issueI’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.
Issue Analytics
- State:
- Created 7 years ago
- Comments:9
Top Results From Across the Web
Angular 2 - Dynamically modifying nvd3 data does not reflect on the ...
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...
Read more >nvd3 Angular2 change chart options dynamically
I've already tried this: this.options.chart.yDomain = [0.1,0.2];. Any help is ...
Read more >Google Visualization API Reference | Charts
If you change values in a DataTable after it is passed into a visualization's draw() method, the changes will not immediately change the...
Read more >D3.js Bar Chart Tutorial: Build Interactive JavaScript Charts ...
From this D3.js Bar Chart tutorial you can learn how to create beautiful, ... for loading data which is a non-backward compatible change....
Read more >How to Show Data on Mouseover in d3.js | Tutorial by Chartio
But while our data has a count value for each of our fruits, there's no indication of that number in the chart other...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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()
@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.