title: Highchart issue when added into bootstrap carousel
body: <p>I was trying to add a charts using <a href="http://www.highcharts.com/demo/column-stacked-and-grouped" rel="nofollow noreferrer">Highcarts</a> on a bootstrap carousel. I added just two charts and put it inside two different slider and when I run it, the first slide looks okay but when in the next slide, the width of the chart became small. I tried other workarounds available which I found in <a href="https://stackoverflow.com/questions/17385986/highcharts-content-in-bootstrap-carousel-is-not-auto-resizing-to-carousel">here</a> but no joy.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="chart-slider" class="carousel slide" data-ride="carousel"&gt;
          &lt;!-- Indicators --&gt;
     &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#chart-slider" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#chart-slider" data-slide-to="1"&gt;&lt;/li&gt;
     &lt;/ol&gt;
  
     &lt;!-- Wrapper for slides --&gt;
     &lt;div class="carousel-inner" role="listbox"&gt;
        &lt;div class="item active"&gt;
        &lt;div id="chart-two" class="chart-container"&gt;&lt;/div&gt;
     &lt;/div&gt;
  
     &lt;div class="item" class="chart-container"&gt;
         &lt;div id="chart-three"&gt;&lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p></p>