Angular NVD3: How to access the chart object defined in HTML

Question

I have defined a multibar chart using the <nvd3> directive and passing the data and options to it defined in my controller:

<nvd3 options="vm.options" data="vm.data"></nvd3>

Now I want to somehow access the chart object created to do some manipulations, for example, to obtain the xAxis scaling function.

If the chart is defined within JavaScript I have that object:

var chart = nv.models.multiBarChart()
      .stacked(false)
      .showControls(false);

// and I can get these scaling functions
  var yValueScale = chart.yAxis.scale();
  var xValueScale = chart.xAxis.scale();

Is it possible to also get them if the chart is defined in HTML? Thanks in advance.

Answer 1

I'm not sure if you need this anymore (it's been almost a year) but I think I may have found something that could be a solution? Or lead you (or anyone else) to one if it's not what you need?

After messing with the object, if you just need it at the beginning, you can use the 'on-ready' option within the nvd3 tag.

<nvd3 options="yourOptions" data="yourData" on-ready="callbackFunction">

The scope will then be passed into the function you set in your controller. See also: https://github.com/krispo/angular-nvd3/issues/445

It's possible to use the callback option in your options, which allows you to use the chart variable. So it'd be something along the lines of

callback: function(chart) { *use chart here* }

See also: http://krispo.github.io/angular-nvd3/#/lineChart and look at the options on the side for callback. You may be able to set callback within the html tag, but I haven't tried that out yet.