I'm currently using dynamic highcharts graphs within my bootstrap carousel.
Here is a snippet of my carousel setup:
<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 expands to 100% width of the div, while the second item has a fixed width of 400px.
For the graph options, I have not specified the width and height. Here are the options I am using:
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: []
}
If anyone has suggestions on how I can resolve this issue, please let me know!