Highcharts Item Width Not 100% In Carousel

I'm dynamically creating highcharts graphs in my bootstrap carousel. I have a carousel like this:

Solution 1:

It seems that the charts need a window resize since the carousel slides aren't loaded into the dom, besides the active slide. You could add something like this to your code to make it resize on the slide event.

$('.carousel').carousel({
    interval: 3000
}).bind('slide.bs.carousel', function() {
    setTimeout(function() {$(window).trigger('resize')} , 1);           
});

You would want to use a setTimeout to allow the next slide to appear in the dom before resizing the window.

Share