Highcharts item width not 100% in carousel

Question

I'm dynamically creating highcharts graphs in my bootstrap carousel.

I have a carousel like this:

<div class="carousel">
  <div class="carousel-inner">
    <div id="item">
      <div id="container1" data-highcharts-chart="0">
        <div class="highcarts-container">
          THE SVG
        </div>
      </div>
    </div>
    <div id="item">
      <div id="container2" data-highcharts-chart="1">
        <div class="highcarts-container">
          THE SVG
        </div>
      </div>
    </div>
    <div id="item">
      <div id="container3" data-highcharts-chart="2">
        <div class="highcarts-container">
          THE SVG
        </div>
      </div>
    </div>
    ...
  </div>
</div>

The first item shows 100% width of the div like this:

The second item has a fixed width of 400px like this:

I haven't set the width and height im my graph options. These are my options:

var optionsbar = {
chart: {
    type: 'bar',
    events: {
        click: function(event) {
            window.location.href = '/result/question/questionid/';
        }
    }
},
xAxis: {
    categories: '',
    title: {
        text: null
    }
},
yAxis: {
    min: 0,
    title: {
        text: 'Aantal keer gekozen',
        align: 'high'
    },
    labels: {
        overflow: 'justify'
    }
},
tooltip: {
    //valueSuffix: ' aantal keer gekozen'
},
plotOptions: {
    bar: {
        dataLabels: {
            enabled: true,
            color: 'black',
            formatter: function() {
                if (this.y === 0) {
                    return null;
                } else {
                    return this.y;
                }
            }
        },
        stacking: 'normal'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 100,
    floating: true,
    borderWidth: 1,
    backgroundColor: '#FFFFFF',
    shadow: true
},
credits: {
    enabled: false
},
exporting: {
    enabled: true
},
series: []

}

Anyone knows how I can fix this?

Answer 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.