I searched the Internet to solve this problem, but I am not familiar with it yet. I was hoping someone had experience with this and could help point me in the right direction.
I have a line chart created using Angular -nvd3 and I use Bootstrap for responsiveness. Basically I have two charts in a row. The problem I am facing is that when I first load the page, the charts curl to a small width. I do not set the width on the charts to inherit 100% width and fill the container. As soon as I do something with the browser, for example, open the console or resize the browser, the charts are scaled to their correct width. I was wondering if there is a way to resize. I used to have a similar problem when using c3d3, but using chart.resize () solved the problem. I do not know if nvd3 has a similar method, since I do not have much experience with nvd3. I was wondering if there is a similar method,which I could use, or if there was a clean way with d3 for this.
Below are the before and after pictures to help visualize the problem:
Before: 
After opening the console or resizing the browser in any way, it scales correctly: 
EDIT: I have to add that setting a fixed width bypasses the problem, but then the inherent responsiveness goes away (new problems arise when the graphics overlap with smaller browser sizes)
EDIT: Added some code snippets that I hope can help. I use rows and columns in the Bootstrap method. I also declare chart parameters in JS
HTML
<div class="row">
<div class="col-sm-6">
<nvd3 id="inlet" options="inletOptions" data="inletData"></nvd3>
</div>
<div class="col-sm-6">
<nvd3 id="outlet" options="outletOptions" data="outletData"></nvd3>
</div>
</div>
Js
$scope.inletOptions = {
chart: {
type: 'lineChart',
height: 300,
margin : {
top: 20,
right: 20,
bottom: 40,
left: 55
},
x: function(d) { return d.x; },
y: function(d) { return d.y; }
}
};