DonOfDen
Reputation: 4088
Highcharts chart width to dispay size dynamically
I am working with highcharts and bootstrap Carousel.
What I am trying to achieve is to slide the charts in Carousel. It works fine bu the first chart only takes the full width of the Carousel. The other sliders just taking the half of the Carousel width.
How to make it width to 100%. You can check by sliding to 2,3,4 Carousel to see only half of the Carousel is covered with chart.
Image:
My Code:
$(function () {
$('#container1').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
$(function () {
$('#container2').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: "Winter 2012-2013",
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(1970, 9, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25],
[Date.UTC(1970, 10, 27), 0.2],
[Date.UTC(1970, 11, 2), 0.28],
[Date.UTC(1970, 11, 26), 0.28],
[Date.UTC(1970, 11, 29), 0.47],
[Date.UTC(1971, 0, 11), 0.79],
[Date.UTC(1971, 0, 26), 0.72],
[Date.UTC(1971, 1, 3), 1.02],
[Date.UTC(1971, 1, 11), 1.12],
[Date.UTC(1971, 1, 25), 1.2],
[Date.UTC(1971, 2, 11), 1.18],
[Date.UTC(1971, 3, 11), 1.19],
[Date.UTC(1971, 4, 1), 1.85],
[Date.UTC(1971, 4, 5), 2.22],
[Date.UTC(1971, 4, 19), 1.15],
[Date.UTC(1971, 5, 3), 0]
]
}, {
name: "Winter 2013-2014",
data: [
[Date.UTC(1970, 9, 29), 0],
[Date.UTC(1970, 10, 9), 0.4],
[Date.UTC(1970, 11, 1), 0.25],
[Date.UTC(1971, 0, 1), 1.66],
[Date.UTC(1971, 0, 10), 1.8],
[Date.UTC(1971, 1, 19), 1.76],
[Date.UTC(1971, 2, 25), 2.62],
[Date.UTC(1971, 3, 19), 2.41],
[Date.UTC(1971, 3, 30), 2.05],
[Date.UTC(1971, 4, 14), 1.7],
[Date.UTC(1971, 4, 24), 1.1],
[Date.UTC(1971, 5, 10), 0]
]
}, {
name: "Winter 2014-2015",
data: [
[Date.UTC(1970, 10, 25), 0],
[Date.UTC(1970, 11, 6), 0.25],
[Date.UTC(1970, 11, 20), 1.41],
[Date.UTC(1970, 11, 25), 1.64],
[Date.UTC(1971, 0, 4), 1.6],
[Date.UTC(1971, 0, 17), 2.55],
[Date.UTC(1971, 0, 24), 2.62],
[Date.UTC(1971, 1, 4), 2.5],
[Date.UTC(1971, 1, 14), 2.42],
[Date.UTC(1971, 2, 6), 2.74],
[Date.UTC(1971, 2, 14), 2.62],
[Date.UTC(1971, 2, 24), 2.6],
[Date.UTC(1971, 3, 2), 2.81],
[Date.UTC(1971, 3, 12), 2.63],
[Date.UTC(1971, 3, 28), 2.77],
[Date.UTC(1971, 4, 5), 2.68],
[Date.UTC(1971, 4, 10), 2.56],
[Date.UTC(1971, 4, 15), 2.39],
[Date.UTC(1971, 4, 20), 2.3],
[Date.UTC(1971, 5, 5), 2],
[Date.UTC(1971, 5, 10), 1.85],
[Date.UTC(1971, 5, 15), 1.49],
[Date.UTC(1971, 5, 23), 1.08]
]
}]
});
});
$(function () {
$('#container3').highcharts({
chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
'thebulletin.metapress.com</a>'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'USA',
data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
}, {
name: 'USSR/Russia',
data: [null, null, null, null, null, null, null, null, null, null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}]
});
});
$(function () {
$('#container4').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="container1" style="height: 400px; margin: 0 auto"></div>
</div>
<div class="item">
<div id="container2" style="height: 400px; margin: 0 auto"></div>
</div>
<div class="item">
<div id="container3" style="height: 400px; margin: 0 auto"></div>
</div>
<div class="item">
<div id="container4" style="height: 400px; margin: 0 auto"></div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>Upvotes: 1
Views: 5763
Answers (6)
davcs86
Reputation: 3935
Fire the event window resize each time the carousel has completed its slide transition
$("#myCarousel").on('slid.bs.carousel', function () {
$(window).trigger("resize");
});
$(function () {
/// the new code
$("#myCarousel").on('slid.bs.carousel', function () {
$(window).trigger("resize");
});
$('#container1').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
$(function () {
$('#container2').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: "Winter 2012-2013",
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(1970, 9, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25],
[Date.UTC(1970, 10, 27), 0.2],
[Date.UTC(1970, 11, 2), 0.28],
[Date.UTC(1970, 11, 26), 0.28],
[Date.UTC(1970, 11, 29), 0.47],
[Date.UTC(1971, 0, 11), 0.79],
[Date.UTC(1971, 0, 26), 0.72],
[Date.UTC(1971, 1, 3), 1.02],
[Date.UTC(1971, 1, 11), 1.12],
[Date.UTC(1971, 1, 25), 1.2],
[Date.UTC(1971, 2, 11), 1.18],
[Date.UTC(1971, 3, 11), 1.19],
[Date.UTC(1971, 4, 1), 1.85],
[Date.UTC(1971, 4, 5), 2.22],
[Date.UTC(1971, 4, 19), 1.15],
[Date.UTC(1971, 5, 3), 0]
]
}, {
name: "Winter 2013-2014",
data: [
[Date.UTC(1970, 9, 29), 0],
[Date.UTC(1970, 10, 9), 0.4],
[Date.UTC(1970, 11, 1), 0.25],
[Date.UTC(1971, 0, 1), 1.66],
[Date.UTC(1971, 0, 10), 1.8],
[Date.UTC(1971, 1, 19), 1.76],
[Date.UTC(1971, 2, 25), 2.62],
[Date.UTC(1971, 3, 19), 2.41],
[Date.UTC(1971, 3, 30), 2.05],
[Date.UTC(1971, 4, 14), 1.7],
[Date.UTC(1971, 4, 24), 1.1],
[Date.UTC(1971, 5, 10), 0]
]
}, {
name: "Winter 2014-2015",
data: [
[Date.UTC(1970, 10, 25), 0],
[Date.UTC(1970, 11, 6), 0.25],
[Date.UTC(1970, 11, 20), 1.41],
[Date.UTC(1970, 11, 25), 1.64],
[Date.UTC(1971, 0, 4), 1.6],
[Date.UTC(1971, 0, 17), 2.55],
[Date.UTC(1971, 0, 24), 2.62],
[Date.UTC(1971, 1, 4), 2.5],
[Date.UTC(1971, 1, 14), 2.42],
[Date.UTC(1971, 2, 6), 2.74],
[Date.UTC(1971, 2, 14), 2.62],
[Date.UTC(1971, 2, 24), 2.6],
[Date.UTC(1971, 3, 2), 2.81],
[Date.UTC(1971, 3, 12), 2.63],
[Date.UTC(1971, 3, 28), 2.77],
[Date.UTC(1971, 4, 5), 2.68],
[Date.UTC(1971, 4, 10), 2.56],
[Date.UTC(1971, 4, 15), 2.39],
[Date.UTC(1971, 4, 20), 2.3],
[Date.UTC(1971, 5, 5), 2],
[Date.UTC(1971, 5, 10), 1.85],
[Date.UTC(1971, 5, 15), 1.49],
[Date.UTC(1971, 5, 23), 1.08]
]
}]
});
});
$(function () {
$('#container3').highcharts({
chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
'thebulletin.metapress.com</a>'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'USA',
data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
}, {
name: 'USSR/Russia',
data: [null, null, null, null, null, null, null, null, null, null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}]
});
});
$(function () {
$('#container4').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="container1" style="height: 400px; margin: 0 auto"></div>
</div>
<div class="item">
<div id="container2" style="height: 400px; margin: 0 auto"></div>
</div>
<div class="item">
<div id="container3" style="height: 400px; margin: 0 auto"></div>
</div>
<div class="item">
<div id="container4" style="height: 400px; margin: 0 auto"></div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>Upvotes: 1
Usman Khawaja
Reputation: 819
Try to use the following css
#highcharts-4, #highcharts-8,#highcharts-12{
width:100% !important;
}
Upvotes: 2
Kavita
Reputation: 79
Try this -
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="container1" style="height: 400px; width:72%; margin: 0 auto"></div>
</div>
<div class="item">
<div id="container2" style="height: 400px; width:72%; margin: 0 auto"></div>
</div>
<div class="item">
<div id="container3" style="height: 400px; width:72%; margin: 0 auto"></div>
</div>
<div class="item">
<div id="container4" style="height: 400px; width:72%; margin: 0 auto"></div>
</div>
</div>
Assign width to your container div. I hope it will help you.
Upvotes: 1
Shanoor
Reputation: 13682
It seems that the carousel is preventing highcharts from getting the right size of the container. You could force a reflow() on the carousel's sliding event. This is ugly (you see the chart being resized because you can't reflow before the slide appears) but it works:
$("#myCarousel").on('slid.bs.carousel', function () {
$('#container1').highcharts().reflow();
$('#container2').highcharts().reflow();
$('#container3').highcharts().reflow();
$('#container4').highcharts().reflow();
});
This code is called everytime there is a slide so it's not optimal, have you tried putting a width on your div?
Upvotes: 1
Nishith Kant Chaturvedi
Reputation: 4769
Use this in your chart options
chart:{
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
spacingBottom: 0,
margin:0
}
one more thing, you are setting height: 400px; in your container. set width 100% as well , highcharts default make 600 width.
Upvotes: 2
Related Questions
- how can we make bar width dynamic in highcharts?
- Highcharts: Change scale sizes
- Highcharts width continue expanding as chart width grows
- responsive highcharts with dynamic font size and widths
- How to make responsive highchart?
- Highchart data based to set div width and height dynamically
- set width of chart, highcharts
- Highcharts - set column width dynamically
- Highcharts: setSize on each Multiple chart
- Highcharts: How to resize chart from external JS?