3

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; 
}
genxgeek
  • 13,109
  • 38
  • 135
  • 217
  • Cause your problem occurs on the second slide read this http://stackoverflow.com/a/17115808/1596547 – Bass Jobsen Jun 30 '13 at 10:33
  • your second container, don't have a class 'container-main' like the first have. Try to add this and add a width:100% like `.container-main { height: 540px; width: 100%; }` – Bass Jobsen Jun 30 '13 at 11:52
  • Problem is that second element has style: `display:none` so when creating chart width of that chart is NaN/0 -> in that case default value for Highcharts chart is 600px. – Paweł Fus Jul 01 '13 at 11:54
  • Here is an updated fiddle -> http://jsfiddle.net/aPEVy/20/ I added display:block but no go. What am I missing? Width: 100% didn't seem to resize correctly and ran off carousel. thx – genxgeek Jul 01 '13 at 15:50
  • No, I mean that items in carousel are not visible, see: http://jsfiddle.net/aPEVy/25/ (items have display set) - container for Highcharts is visible, and it works - of course in that case carousel doesn't work. What you can do? When carousel comes to Highcharts resize chart using `chart.setSize()` – Paweł Fus Jul 02 '13 at 10:58

2 Answers2

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.

Roger
  • 4,737
  • 4
  • 43
  • 68
1

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.

cakan
  • 2,099
  • 5
  • 32
  • 42