Dynamicznie tworzę wykresy highchartów w karuzeli bootstrap.

Mam taką karuzelę:

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

Pierwszy element pokazuje 100% szerokości div w ten sposób:

Drugi element ma stałą szerokość 400px w następujący sposób:

Nie ustawiłem szerokości i wysokości w opcjach mojego wykresu. Oto moje opcje:

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: []

}

Ktoś wie, jak mogę to naprawić?