How can I make the size of stacked-area-chart in nvd3-angularjs-directives adjustable depending on the size of the div? - width

Question

I have a chart created using nvd3-angularjs-directives. I want the size of this graph adjust depending on the size of its div. My problem initially is that the value of y reach this value 2000000000 and the label is cut off somewhere in between. I want the graph to be able to adjust so that the whole graph even the label will be displayed correctly.
Here's the chart
<div ng-controller="GraphController">
<nvd3-stacked-area-chart
data="GraphData"
id="Graphs"
showXAxis="true"
showYAxis="true"
showLegend="true"
interactive="true"
tooltips="true"
objectEquality="true"
width="auto"
xAxisTickFormat="xAxisTickFormatFunction()"
yAxisTickFormat="yAxisTickFormatFunction()"
>
<svg></svg>
</nvd3-stacked-area-chart>
</div>
1) I changed the value of width equal to auto. But it didn't work.
2) I added this in the div style="color:blue;width:auto;". It didnt work as well

Answer 1

I believe in you have to give it an absolute size. What I did to work around this was to define the size inline:
<nvd3-stacked-area-chart
style="width:{{chartSettings.width}}px; height:{{chartSettings.height}}px;"
...
</nvd3-stacked-area-chart>
and then determine the size dynamically in the controller:
$scope.chartSettings= {
width: $window.innerWidth*0.8,
height: $window.innerHeight*0.8
}