title: window.resize() in Highcharts
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
  });
  
  //High Chart JS
  $(function () {
    $('#container').highcharts({
  
      backgroundColor: {
        stops: [
          [0, '#2a2a2b'],
          [1, '#3e3e40']
        ]
      },
      chart: {
        type: 'area',
        backgroundColor: "#000"
      },
      title: {
        text: 'US and USSR nuclear stockpiles',
        color: '#fff'
      },
      subtitle: {
        text: 'Source: &lt;a&gt;' +
        'Xylines&lt;/a&gt;'
      },
      xAxis: {
        allowDecimals: false,
        labels: {
          formatter: function () {
            return this.value; // clean, unformatted number for year
          }
        }
      },
      yAxis: {
        title: {
          text: 'Nuclear weapon states'
        },
        labels: {
          formatter: function () {
            return this.value / 1000 + 'k';
          }
        }
      },
      tooltip: {
        pointFormat: '{series.name} produced &lt;b&gt;{point.y:,.0f}&lt;/b&gt;&lt;br/&gt;warheads in {point.x}'
      },
      plotOptions: {
        area: {
          pointStart: 1940,
          marker: {
            enabled: false,
            symbol: 'circle',
            radius: 2,
            states: {
              hover: {
                enabled: true
              }
            }
          }
        }
      },
      series: [{
        name: 'USA',
        data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
               1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
               27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
               26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
               24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
               22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
               10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
      }, {
        name: 'USSR/Russia',
        data: [null, null, null, null, null, null, null, null, null, null,
               5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
               4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
               15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
               33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
               35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
               21000, 20000, 19000, 18000, 18000, 17000, 16000]
      }]
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*!
   * Start Bootstrap - Simple Sidebar (http://startbootstrap.com/)
   * Copyright 2013-2016 Start Bootstrap
   * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
   */
  
  /* Toggle Styles */
  
  #wrapper {
      padding-left: 0;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  
  #wrapper.toggled {
      padding-left: 220px;
  }
  
  #sidebar-wrapper {
      z-index: 1000;
      position: fixed;
      left: 220px;
      width: 0;
      height: 100%;
      margin-left: -220px;
      overflow-y: auto;
      background: #000;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  
  #wrapper.toggled #sidebar-wrapper {
      width: 220px;
  }
  
  #page-content-wrapper {
      width: 100%;
      position: absolute;
      padding: 15px;
  }
  
  #wrapper.toggled #page-content-wrapper {
      position: absolute;
      margin-right: -220px;
  }
  
  /* Sidebar Styles */
  
  .sidebar-nav {
      position: absolute;
      top: 0;
      width: 220px;
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  .sidebar-nav li {
      text-indent: 20px;
      line-height: 40px;
  }
  
  .sidebar-nav li a {
      display: block;
      text-decoration: none;
      color: #999999;
  }
  
  .sidebar-nav li a:hover {
      text-decoration: none;
      color: #fff;
      background: rgba(255,255,255,0.2);
  }
  
  .sidebar-nav li a:active,
  .sidebar-nav li a:focus {
      text-decoration: none;
  }
  
  .sidebar-nav &gt; .sidebar-brand {
      height: 65px;
      font-size: 18px;
      line-height: 60px;
  }
  
  .sidebar-nav &gt; .sidebar-brand a {
      color: #999999;
  }
  
  .sidebar-nav &gt; .sidebar-brand a:hover {
      color: #fff;
      background: none;
  }
  
  @media(min-width:768px) {
      #wrapper {
          padding-left: 220px;
      }
  
      #wrapper.toggled {
          padding-left: 52px;
      }
  
      #sidebar-wrapper {
          width: 220px;
      }
  
      #wrapper.toggled #sidebar-wrapper {
          width: 52px;
      }
  
      #page-content-wrapper {
          padding: 20px;
          position: relative;
      }
  
      #wrapper.toggled #page-content-wrapper {
          position: relative;
          margin-right: 0;
          padding-left: 52px;
      }
  }   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="blackrockdigital.github.io/startbootstrap-simple-sidebar/js/jquery.js"&gt;&lt;/script&gt;
  &lt;!-- Sidebar --&gt;
  &lt;div id="wrapper"&gt;
  
    &lt;!-- Sidebar --&gt;
    &lt;div id="sidebar-wrapper"&gt;
      &lt;ul class="sidebar-nav"&gt;
        &lt;li class="sidebar-brand"&gt;
          &lt;a href="#"&gt;
           Logo
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Dashboard&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Shortcuts&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Overview&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Events&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;About&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Services&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;!-- /#sidebar-wrapper --&gt;
  
    &lt;!-- Page Content --&gt;
    &lt;div id="page-content-wrapper"&gt;
      &lt;a href="#menu-toggle" class="btn btn-default" id="menu-toggle"&gt;Toggle Menu&lt;/a&gt;
      &lt;div class="container-fluid" style="background:#000"&gt;
        &lt;div id="container" style="background:#000"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- /#page-content-wrapper --&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>When I toggle the menu in Large and Medium screen I want the Chart to redrawn or resized, I tried many but dint got any output.</p>
  <p>I tried this
  <code>$(window).resize();</code>
  <code>#container: redraw();</code></p>
  <p>here's the jsfiddle link <a href="https://jsfiddle.net/dLujgtf9/" rel="nofollow noreferrer">https://jsfiddle.net/dLujgtf9/</a></p>
  <p>Can someone help me please, I got irritated up in this from last 2 days, my Boss is shouting like hell.....</p>
  <p>Thanks &amp; regards</p>
  <h1>zeasts</h1>