title: Chart rendering issue with resizing <div> container
body: <p>I have <strong>two</strong> question for chart rendering when its container is resized.</p>
  
  <p><strong>First</strong> thing is, how to render chart correctly when its container is resized.. </p>
  
  <p>i.e. Maximize / Restore problem, at its first rendering it works just fine, however when I restore the size of the window, the charts begin to overlay as its previous size. As you can see from the following pics: 
   <img src="https://i.stack.imgur.com/dlGJQ.png" alt="enter image description here"><img src="https://i.stack.imgur.com/goi6X.png" alt="enter image description here"></p>
  
  <p>I know if you set a resize handler (and wait a small amount of time) to refresh the chart whenever the window is resized, the problem can be solved. I am thinking whether there are some other approaches to let the chart flow to the right size without refreshing the chart every time. </p>
  
  <p>The <strong>second</strong> thing is:
  If the charting area is in a <code>&lt;div&gt;</code> container, and the size of the container will change with a resize bar. I use the following code to get it work with the window resizing. But it <strong>won't</strong> work with a moving resize bar. </p>
  
  <pre><code>$(window).resize(function () {
          setTimeout(function () {
              createChart(chartData);
          }, 300);
      });
  </code></pre>
  
  <p><strong>Note</strong>: The grid component works just fine in any case and just the chart I am always having troubles. 
  I am using HighCharts, kendoUI grid and both of them are rendered in jQueryUI portlets. </p>
  
  <p>Any comments appreciated!This problem has taken me a long time..</p>
  
  <p><strong>Update:</strong> Since I think my explanation of the issue is not clear enough, I added <a href="http://jsfiddle.net/jxTUw/" rel="nofollow noreferrer"><strong>JSFiddle example</strong></a> for better understanding. Basically I want two things: 1. reflow the size of the chart to fit its container when window is resizing; 2. reflow the size of chart to fit its container when the resize bar is moving. </p>
  
  <p>I am using plugins <a href="http://www.highcharts.com/" rel="nofollow noreferrer">highcharts</a> for charting, <a href="http://layout.jquery-dev.net/" rel="nofollow noreferrer">jQuery UI Layout</a> for layout management in this example. For some other plugins I am using, please refer to <a href="https://stackoverflow.com/questions/11378324/is-it-recommended-to-use-a-lot-of-jquery-plugins-in-your-project"><strong>here</strong></a>, I am not sure whether they have conflicts. </p>
  
  <p>Thanks!</p>