Highcharts content in bootstrap carousel is not au

Question

I have a high chart as content div content on a second item within bootstrap carousel. It resizes fine if its on the first carousel slide/item. However, if the highchart is on the second slide it doesn't resize when it slides in.

How can I autoresizse carousel content if not the first visible carousel slide/item?

Here is the jsfiddle -> http://jsfiddle.net/ARYAv/

<div class="content" >
     <div class="hero-unit" >
         <div id="mainCarousel" class="carousel slide">
          <div class="carousel-inner">
            <div class="item active">
                <h2 style="padding-left: 22px">Hello1</h2>
                <div id="container2" class="container-main">click for next slide that doesn't autoresize</div>
                <a style="margin-left: 22px" href="#" class="btn btn-primary btn-large">Hello1 &raquo;</a>
            </div>
            <div class="item">
                <h2 style="padding-left: 22px">Hello2</h2>
                    <div id="container" class="container-main"></div>
                <a href="#" class="btn btn-primary btn-large">Hello2 &raquo;</a> 
            </div>
            </div>              
            <a class="left carousel-control" href="#mainCarousel" data-slide="prev" >&lsaquo;</a>
            <a class="right carousel-control" href="#mainCarousel" data-slide="next" >&rsaquo;</a>
     </div>
  </div>                
</div>

.container-main {
    display: block; 
    height: 540px; 
}

Answer 1

I ran into the same problem and used the following solution to size my chart:

$('#chart-carousel').bind('slid', function() {
    $("#value-stats").highcharts().setSize(500, 350);
});

By binding the slid event - which signals a completed slide of the carousel - to the setSize() method of the chart, the chart gets resized properly.

Two points:

1. There's is a visual effect as you see the chart actually change size when the slide is completed.

2. I tried to work it out with dynamic sizing using container.height and container.width but this had no effect at all hence the hard coded sizes. Not ideal but at least my charts get properly sized.

Answer 2

I know that it's an old question, but I stumbled upon the same problem and found a solution using Highcharts reflow function.

If all charts have the class container-main, you can do something like this:

$('.carousel').carousel().on('slide.bs.carousel', function (e) {
    setTimeout(function(){
        $('.container-main').each(function(){
            $(this).highcharts().reflow();
        });
    }, 1);
});

Hope this will help somebody.