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.

score 3 · Answer 1 · edited May 23 '17 at 11:43

3

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.

edited May 23 '17 at 11:43

Community

1
1

answered Mar 14 '14 at 14:55

shabeer90

5,161
4
47
65

I had seen this code elsewhere, however I was wondering what would the variable `chart` be if the code for the graph was something like `` – geekchic Mar 19 '14 at 09:54
I also found your answer here http://stackoverflow.com/questions/16474988/how-to-set-height-and-width-of-nvd3-chart really helpful! But I'm still struggling with how to access the `chart` object in my case :/ – geekchic Mar 19 '14 at 10:03
Really sorry but I am not quite sure how it works with `Angularjs` , I've added tag JavaScritpt for more support on the forum. Try to get your code onto [JSFiddle](http://jsfiddle.net/) so people can have a look at your entire code and help you out. – shabeer90 Mar 19 '14 at 10:21

score 1 · Accepted Answer · answered Mar 20 '14 at 09:46

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!

nvd3 resize lineplusbarchart

2 Answers2