Why would the div with this flot chart not resize correctly when changing using $route (AngularJS)

Question

If I click out of the main screen,then return I see the graph doesn't resize correctly.

The HTML is simply (Some of the styling is for debugging/testing):

<div class="panel-body" ng-show="graphType !== 'Mood Sentiment'" style="width:100%; max-width:100%;">
      <flot id="placeholder" dataset="dataset" options="options" height="300px" style="width:100%; max-width:100%;"
            ng-disabled="graphLoading" ng-class="{disabled:graphLoading} "></flot>
    </div>

What its doing:

Incorrect sizing of flot chart.

What I want it to be doing:

Correct sizing

Are you including the flot resize plugin? – Nicholas Hirras Feb 10 '15 at 03:56 — Nicholas Hirras, Feb 10 '15 at 03:56
Nope, should I be? :) – David van Dugteren Feb 10 '15 at 04:11 — David van Dugteren, Feb 10 '15 at 04:11

score 2 · Answer 1 · edited May 23 '17 at 11:49

I haven't used flot but a search looking for resize issues with flot in angular found this, one of the comments suggested the flot-resize plugin solved their issues using it with angular.

How to make flot responsive?

I'd suggest trying to include the flot resize js in your app and see if that fixes it.

<script src="../../jquery.flot.js"></script>
<script src="../../jquery.flot.resize.js"></script>

See: http://www.flotcharts.org/flot/examples/resize/

Why would the div with this flot chart not resize correctly when changing using $route (AngularJS)

1 Answers1