Angular nvd3 Line Chart automatic resizing

Question

I'm using angular nvd3 directives.

according to the exemple :https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives/blob/master/examples/lineChart.with.automatic.resize.html

<!--
width and height are removed from the directive for automatic resizing.
-->

Well, if I change The Div size of the graph. it resize but only when I move/open/close the 'console view' (ctrl + shift + i on FF).

I check on angular-nvd3-directive, There is no event call for the resize, so I suppose it's a d3/nvd3 comportement?

My question so far: How to simulate this kind of event for the graph to resize?

Answer 1

You could try firing another resize event which could repaint the graph. window.dispatchEvent(new Event('resize'));

A similar approach worked for me with Chart.js. It's odd when the console being visible changes the page - still don't fully understand how that works but it shows up regularly with dynamic layouts.

Answer 2

I am not sure it will help you or not but I guess you can update the graph while your div resize it works in my case:-

For example:-

$('#my_div').bind('resize', function(){

            for (var i = 0; i < nv.graphs.length; i++) {
                nv.graphs[i].update();
            }

});

Answer 3

You can add a jquery resize event handler, if you are not using jquery then you can attach event handler using angular only.

Using jQuery

$(document).on('resize', function() {

  for (var i = 0; i < nv.graphs.length; i++) {
    nv.graphs[i].update();
  }

});

Using Angular Only

Here is an example shows how to attach event do document using angular.