CODEWITHSUNDEEP
angularjstwitter-bootstrapd3.jsnvd3.jsangular-nvd3
TonalLynx
TonalLynx

Reputation: 376

nvd3 chart starts out squished in browser

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: enter image description here

After opening the console or resizing the browser in any way, it scales correctly: enter image description here

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; }
    }
};

Upvotes: 5

Views: 2768

Answers (2)

Gijs
Gijs

Reputation: 31

If anyone is running into this problem, for me it was actually a very simple solution without a resize event.

This is my chart.

<div id="chart" class="row">
  <div class="col-xs-12">
    <svg>
    </svg>
  </div>
</div>

If I have no data to show, I simply hide the div using JavaScript:

function ShowChart(show) {
  $('#chart').css("display", (show ? "block" : "none"));
}

But it was squished when I passed "true" to the function.

My solution was that I had to first show the div, then use .update() for the graph.

So, for me, this did not work:

d3.select("#chart svg").datum(chart_data); 
chart.update();
ShowChart(true);

And this did:

ShowChart(true);
d3.select("#chart svg").datum(chart_data); 
chart.update()

Upvotes: 0

TonalLynx
TonalLynx

Reputation: 376

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'));
}

Upvotes: 6

Related Questions