0

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

user3714598
  • 1,733
  • 5
  • 28
  • 45

1 Answers1

0

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 
}
burtelli
  • 153
  • 9