title: HighCharts: How to use reflow to allow auto-resize after changing size
body: <p>In our Angular app we're using <a href="https://github.com/pablojim/highcharts-ng" rel="noreferrer">highcarts-ng</a> for our <a href="http://www.highcharts.com/" rel="noreferrer">HighCharts</a> implementation.</p>
  
  <p>Here is the Chart Maximize and Minimize function, which works:</p>
  
  <pre><code>function expandChartPanel() {
      vm.chartMaxed = !vm.chartMaxed;
  
      viewHeader = ScopeFactory.getScope('viewHeader');
      highChart  = ScopeFactory.getScope('highChart');
  
      var chart = highChart.chartObject;
      var highChartContainer       = document.getElementById("highchart-container");
      var highChartContainerWidth  = document.getElementById('highchart-container').clientWidth;
      var highChartContainerHeight = document.getElementById('highchart-container').clientHeight;
  
      var windowWidth  = window.innerWidth;
      var windowHeight = window.innerHeight;
  
      if (vm.chartMaxed) {
  
          vs.savedWidth  = highChartContainerWidth;
          vs.savedHeight = highChartContainerHeight;
  
          console.log('savedWidth  = ', vs.savedWidth);
          console.log('savedHeight = ', vs.savedHeight);
  
          root.chartExpanded          = true;
          viewHeader.vh.chartExpanded = true;
          highChart.highChartMax      = true;
  
          highChartContainerHeight = document.getElementById('highchart-container').clientHeight;
          windowWidth  = window.innerWidth;
          windowHeight = window.innerHeight;
  
          highChart.chartConfig.size.width  = windowWidth;
          highChart.chartConfig.size.height = windowHeight - 220;
  
          chart.setSize(windowWidth, windowHeight - 220);
      }
      else {
          root.chartExpanded          = false;
          viewHeader.vh.chartExpanded = false;
          highChart.highChartMax      = false;
  
          highChart.chartConfig.size.width  = vs.savedWidth;
          highChart.chartConfig.size.height = vs.savedHeight;
  
          chart.setSize(vs.savedWidth, vs.savedHeight);
      }
  
      highChart.restoreChartSize();
  }
  </code></pre>
  
  <p>Here is the reflow function:</p>
  
  <pre><code>function restoreChartSize() {
      console.log('restoreChartSize');
      if (!vs.chartObject.reflowNow) {
          vs.chartObject.reflowNow = vs.chartObject.reflowNow = function() {
              this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height');
              this.containerWidth  = this.options.chart.width  || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width');
              this.setSize(this.containerWidth, this.containerHeight, true);
              this.hasUserSize = null;
          }
       }
  
       vs.chartObject.reflowNow();
  }
  </code></pre>
  
  <p>This reflow function above, works perfectly in this <a href="https://jsfiddle.net/shaunakv1/p62jjnjz/3/" rel="noreferrer">jsFiddle</a>, but not in our app.</p>
  
  <p><a href="https://gist.github.com/leongaban/2e1e1c5cf2cd76e9b3a6" rel="noreferrer">The full Gist file of our HighChartsDirective file</a>.</p>
  
  <p>After clicking Maximize, the chart will expand to the full size of the browser window, but then after dragging to resize the browser window, I call the <code>restoreChartSize</code> function, which activates the reflow.</p>
  
  <p>However the size of the chart does not go to auto-size 100% 100%, it goes back to the previous size of the chart :(</p>
  
  <p>Before Maximize:
  <a href="https://i.stack.imgur.com/d4Guh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/d4Guh.png" alt="enter image description here"></a></p>
  
  <p>After the Maximize function:</p>
  
  <p><a href="https://i.stack.imgur.com/YqegF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YqegF.png" alt="enter image description here"></a></p>
  
  <p>Now after resizing the browser window:</p>
  
  <pre><code>window.onresize = function(event) {
      console.log('window resizing...');
      highChart = ScopeFactory.getScope('highChart');
      highChart.restoreChartSize();
      console.log('highChart.chartConfig = ', highChart.chartConfig);
  };
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/d4Guh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/d4Guh.png" alt="enter image description here"></a></p>
  
  <p>^ back to the smaller static sizes, not auto-size 100%</p>