nvd3 resize lineplusbarchart

Question

I am using the lineplusbarchart from the nvd3 framework and I see that the chart is redrawn when the window is resized only on the horizontal axis. Vertically the height remains static, even when stretched or compressed, as you can see here. This leads me to believe that the only way to change the height is to initialize it each time like so:

<nvd3-line-plus-bar-chart data="data"
      showXAxis="true" showYAxis="true"
      margin="{left:75,top:20,bottom:50,right:75}"                                                                                  
      height="300"                            
</nvd3-line-plus-bar-chart>

My application uses the ui-layout splitter which allows me to expand or compress the chart as I see fit. However, on compressing vertically there is a scroll bar that gets inserted, which is not the behavior I'm looking for. There is no event in the documentation that fires on resize, so I can't pass this new height parameter to nvd3 for it to resize and redraw itself with the new dimensions. I also see a chart.update method in the nvd3 docs, but I'm not sure how it could work in this case.

How do I solve this problem? If I need to explain myself better, let me know.

Answer 1

Okay, so I have finally figured this out. When you are using a directive like nvd3-line-plus-bar-chart in AngularJS, you need to watch for changes in height, because the angular-nvd3-directive does not do this automatically, at least for the height parameter.

This little piece of code in the nvd3LinePlusBarChart directive did it for me:

 scope.$watch('height',function(height) {
          if (height) {
            if (scope.chart) {
              return scope.d3Call(scope.data, scope.chart);
            } 
          }
 });

That's it! And in my own directive, I just update the height on event call like so:

 scope.$on('someEvent', function() {
    scope.$apply(function(){
        scope.height = height;
    })
  });    
}

Hope this helps everyone else who is struggling!

Answer 2

You will have to calculate the heights dynamically based on the window resize, here is an example on SO to get the window height and pass the height value to the chart during resizing.

Here's the changes you might need :

nv.utils.windowResize(function() {
    chart.height(yourNewHeight);
    chart.update();
});

Hope it helps.