score:1

Accepted answer

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.

score: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.


Related Query

More Query from same tag