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.

please provide a jsfiddle with the data sample and also what you want to achieve in comments — Naren Murali, Aug 18 '17 at 08:35

score 1 · Accepted Answer · answered Jul 13 '18 at 13:36

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.

score 0 · Answer 2 · answered Jun 21 '19 at 18:32

You can use angular-NVD3 directly to get the chart. If you use the api attribute you can 'Get access to the internal directive scope. For example, we can get chart object via $scope.api.getScope().chart. [v0.1.0+]'. From http://krispo.github.io/angular-nvd3/#/quickstart

In other words, define an api attribute when you use the directive, e.g.:

<nvd3 options="ReportCtrl.avgVisitorsTimeSeriesOptions" data="ReportCtrl.avgVisitorsTimeSeriesData" api="ReportCtrl.d3API"></nvd3>

Then in your controller you can use the API to access the directive scope, from which you can get the d3 chart object, e.g.:

console.log(vm.d3API.getScope().chart); // This gets the actual d3 chart from inside the directive's scope.

Hope this helps.

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

2 Answers2