ng-nvd3 chart is not updating with data change

I am using a ng2-nvd3 in project and unable to update my chart new data is changed on runtime. only legends are updated. Any help would be appreciated.

I am creating a method and asssigning it to a button: getStats(): any{ this.data.push({“values”:[{“x”:1000,“y”:1000}], “key”: “runtime added value”});
this.nvD3.chart.update(); }

Code in my component: `import { Component, OnInit, AfterViewInit, ViewChild } from ‘@angular/core’;

import {nvD3} from ‘ng2-nvd3’; import * as d3 from ‘d3’; //declare let d3: any;

@Component({ selector: ‘d3graph’, templateUrl:‘./d3graph.component.html’ }) export class D3graphComponent implements OnInit { chart: any; config:any; api: any; options; data; chartType; @ViewChild(nvD3) nvD3: nvD3; constructor() { }

ngOnInit() { this.options = { chart: { type: ‘lineChart’, height: 450, margin : { top: 20, right: 20, bottom: 60, left: 65 }, x: function(d){ return d.x; }, y: function(d){ return d.y; }, callback: function(chart){ console.log(“!!! lineChart callback !!!”);},

      color: d3.scale.category10().range(),
      //useInteractiveGuideline: true,
      //clipVoronoi: false,
      xAxis: {
          axisLabel: 'X Axis'
          //ticks: 10
          // tickFormat: function(d) {
          //     return d3.time.format('%m/%d/%y')(new Date(d))
          // },
          // ticks: 10
      },

      yAxis: {
          axisLabel: 'Y Axis',
          tickFormat: function(d){
              return d3.format(",d")(d);
          },
          axisLabelDistance: 0
      },

      interactiveLayer:{
        tooltip:{
          headerEnabled: true,
          headerFormatter: function (key) {
            return "Project name";
          }
          
        }
      },
      dispatch: {
        stateChange: function(e){ console.log('stateChange') },
        changeState: function(e){ console.log('changeState') },
        
        renderEnd: function(e){ console.log('renderEnd');  }
    }
      
    }
};

this.data = [
  {
    "values": [{
        "x": 0,
        "y": 0
    }, {
        "x": 173,
        "y": 100
    }, {
        "x": 347,
        "y": 600
    }, {
        "x": 526,
        "y": 9
    }, {
        "x": 700,
        "y": 40
    }, {
        "x": 931,
        "y": 60
    }, {
        "x": 1058,
        "y": 100
    }],
    "key": "Project 656"
  },  
{
    "values": [{
        "x": 0,
        "y": 341
    }, {
        "x": 173,
        "y": 341
    }, {
        "x": 347,
        "y": 341
    }, {
        "x": 526,
        "y": 341
    }, {
        "x": 700,
        "y": 341
    }, {
        "x": 931,
        "y": 341
    }, {
        "x": 1058,
        "y": 341
    }],
    "key": "Project Hello"
}, {
    "values": [{
        "x": 0,
        "y": 560
    }, {
        "x": 173,
        "y": 100
    }, {
        "x": 347,
        "y": 341
    }, {
        "x": 526,
        "y": 170
    }, {
        "x": 700,
        "y": 370
    }, {
        "x": 931,
        "y": 330
    }, {
        "x": 1058,
        "y": 250
    }],
    "key": "Project 333"
}, {
    "values": [{
        "x": 0,
        "y": 500
    }, {
        "x": 173,
        "y": 230
    }, {
        "x": 347,
        "y": 400
    }, {
        "x": 526,
        "y": 120
    }, {
        "x": 700,
        "y": 190
    }, {
        "x": 931,
        "y": 146
    }],
    "key": "Project sds"
}];

}

getStats(): any{ this.data.push({“values”:[{“x”:1000,“y”:1000}], “key”: “runtime added value”});
this.nvD3.chart.update(); }

} `

[Swatantramishra1]

Hi @ritsWeb, here are solutions. in html file ---- <nvd3 #nvd3 [options]=“options2” [data]=“data2”></nvd3>

in component.ts — @ViewChild(‘nvd3’) nvd3; And wherever you want to update this chart just right . this.nvd3.chart.update(); it will work for sure

Thanks

[Prashanth-Thomas]

@Swatantramishra1 thanks for your quick reply 😃 . This would work fine if it was AngularJS. but i am using Angular4, we do not use $scope in Angular2/4.

we can only gain access to the element using // in the html component <nvd3 #nvd3 [options]=“options” [data]=“data” api=“api”>

// in the TS file within the class @ViewChild(‘nvd3’) nvd3;

// to update new data array, also within TS file this.nvd3.chart.update();

So i am assuming my way to update both options and data is this.nvd3.api.updateWithOptions(); tried it, but it threw an error.