nvd3 chart starts out squished in browser

Question

I have searched the internet for a solution to this problem but have yet to come across one yet. I was hoping someone here has had experience with this and can help point me in the right direction.

I have a line chart created with Angular-nvd3 and I am using Bootstrap for responsiveness. Basically I have two charts per row. The problem I am running into is that when I first load the page, the charts are squished into a small width. I am not setting the width on the charts so that it can inherit 100% width and fill the container. As soon as I do anything with the browser, such as open the console or resize the browser, the charts scale to their correct width. I was wondering if there was any way to force a resize. I had a similar issue before when using c3d3 but using chart.resize() solved the issue. I do not know if nvd3 has a similar method as I do not have as much experience with nvd3. I was wondering if there was a similar method I could use or if there was a pure way with d3 to do this.

Here are some before and after pics to help visualize the issue:

Before:

After opening the console or resizing the browser in any way, it scales correctly:

EDIT: I should add that setting a fixed width circumvents the issue but then the inherent responsiveness goes away (new problems arise where graphs overlap at smaller browser sizes)

EDIT: Added Some code snippets that I hope can help. I am using rows and columns the Bootstrap way. I am also declaring the chart options in the 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; }
    }
};

Answer 1

For those running into a similar issue, please see the following posts:

https://github.com/krispo/angular-nvd3/issues/259

http://plnkr.co/edit/ncT72d?p=preview

$scope.triggerResizeEvent = function() {
    window.dispatchEvent(new Event('resize'));
}