nvd3 directives graphs -- how do I adjust padding?

Question

I'm rendering some data using nvd3 directives, and the plottable area seems to be rendering with a ton of additional padding, but I can't figure out how to adjust that.

How would I adjust it so that the graph takes up more/all of its available space?

Answer 1

In case you are using angularjs-nvd3-directives

Try using 'margin' as attribute for example like:

<nvd3-multi-bar-chart margin="{left:30,top:30,bottom:30,right:30}">
  ... 
</nvd3-multi-bar-chart>

In case you are using angular-nvd3

Try using 'margin' as attribute like above or the 'options' attribute like:

Directive:

<nvd3 ng-controller="MainCtrl" options="options"> ... </nvd3>

Controller:

app.controller('MainCtrl', function($scope) {
  $scope.options = {
    chart: {
      type: 'multiChart',
      margin : {
        top: 30,
        right: 30,
        bottom: 30,
        left: 30
      }
    }
  };
};