title: "display: none" with highcharts - incorrect size
body: <p>How to force to work correctly highcharts with display:none style.
  If initially the chart was invisible (display: none) after it becomes visible (display: block) -its size is set incorrect.</p>
  
  <p><a href="https://jsfiddle.net/0we2u4qg" rel="nofollow">https://jsfiddle.net/0we2u4qg</a><code>example of incorrect chart's size</code></p>
  
  <p>How to fix it?</p>
  
  <pre><code>    &lt;!DOCTYPE HTML&gt;
  
  &lt;html lang = "ru"&gt;
  
  &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
  
      &lt;meta http-equiv = "X-UA-Compatible" content = "IE=edge" /&gt;
  
      &lt;script src = "http://code.jquery.com/jquery-2.2.0.min.js"&gt;&lt;/script&gt;
      &lt;script src = "http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
      &lt;script src = "http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  
      &lt;style&gt;     
          .info {
              position:           absolute;
              left:               50%;
              top:                50%;
  
              color:              #f0f0f0;
              font-weight:        700;
              font-size:          24px;
              font-family:        'calibri';
          }
  
          .chart {
              display:            none;
  
              position:           absolute;
              left:               50px;
              top:                50px;
  
              width:              200px;
              height:             200px;
  
              margin:             0px;
              padding:            0px;
  
              border:             2px solid #bb0000;
          }
  
          .chart .container {
              width:              100%;
              height:             100%;
  
              background-color:   #bbbb00;
          }
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class = "info"&gt;CLICK ANYWHERE&lt;/div&gt;
      &lt;div class = "chart"&gt;&lt;div class = "container"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;script&gt;
  
  (function ($)
  {
      $('.container').highcharts({
          xAxis: {
              categories:     [10, 20, 30, 40, 50,],
          },
          plotOptions: {
              series: {
                  animation:      false
              },
          },
          series: [
          {
              type:           'column',
              data:           [1, 2, 3, 4, 5,],
          },
          {
              type:           'column',
              data:           [5, 4, 3, 2, 1,],
          },
          ]
      });
  
      $(window).click(function(){
          $('.info').hide();
          $('.chart').show();
      });
  
  }(jQuery));
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>