Highcharts item width not 100% in carousel

By : nielsv
Source: Stackoverflow.com
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: image1

The second item has a fixed width of 400px like this: enter image description here

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?

By : nielsv


Answers

You can just use this is in the Username parameter.

admin



This video can help you solving your question :)
By: admin