score:18
I forked your fiddle to a working solution @ http://jsfiddle.net/AxyNp/ The most important code snippet from there is this:
$(window).resize(function() {
height = chart.height
width = $("#chartRow").width() / 2
chart.setSize(width, height, doAnimation = true);
});
The solution bears on this SO post's answer.
It seems like the best you can do to resize the chart's container (and cell) properly is to rely on your own resize trigger. Note that I set the reflow to "false" in the chart's options to remove the existing trigger.
score:3
/**
* Adjust size for hidden charts
* @param chart highcharts
*/
function adjustGraph(chart) {
try {
if (typeof (chart === 'undefined' || chart === null) && this instanceof jQuery) { // if no obj chart and the context is set
this.find('.chart-container:visible').each(function () { // for only visible charts container in the curent context
$container = $(this); // context container
$container.find('div[id^="chart-"]').each(function () { // for only chart
$chart = $(this).highcharts(); // cast from JQuery to highcharts obj
$chart.setSize($container.width(), $chart.chartHeight, doAnimation = true); // adjust chart size with animation transition
});
});
} else {
chart.setSize($('.chart-container:visible').width(), chart.chartHeight, doAnimation = true); // if chart is set, adjust
}
} catch (err) {
// do nothing
}
}
Usage
$(window).resize(function () {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
// resizeEnd call function with pass context body
adjustGraph.call($('body'));
}, 500);
});
For bootstrap tab
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
isChart = $(this).attr('data-chart');
var target = $(this).attr('href');
if (isChart) {
// call functio inside context target
adjustGraph.call($(target));
}
});
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">
<a href="#anagrafica" data-toggle="tab"><h5>Anagrafica</h5></a>
</li>
<li><a href="#consumi" data-toggle="tab" data-chart="1"><h5>Consumi</h5></a></li>
</ul>
On chart
new Highcharts.Chart({
chart: {
renderTo: 'chart-bar',
defaultSeriesType: 'column',
zoomType: 'xy',
backgroundColor: null,
events: {
load: function (event) {
adjustGraph(this);
}
}
},
Html code
<div class="tab-pane" id="charts">
<div class="row-fluid">
<div class="span6 offset3">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner chart-container">
<div class="active item">
<h3>Chart 1/h3>
<div id="bar-pod-annuale">
<div id="chart-bar" style="width:100%;margin: 0 auto"></div>
</div>
</div>
<div class="item">
<h3>Char 2</h3>
/** chart **/
</div>
<div class="item">
<h3>Char 3</h3>
/** chart **/
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
See example on jsfiddle
score:22
You can avoid using javascript to perform the resize and rely on css instead. This can be accomplished by rendering the HighChart into a div that has:
position: absolute;
width: 100%;
To make sure that the height of the container is appropriate, you'll have to wrap this absolutely positioned element in another element that has explicitly set height:
position: relative;
width: 100%;
height: 400px;
By rendering the HighChart into a position absolute element, the chart will be responsive to width reductions in the parent.
Source: stackoverflow.com
Related Query
- Highcharts charts don't resize properly on window resize
- Responsive Highcharts not sizing correctly until window resize
- Highcharts - Hidden charts don't get re-size properly
- Highcharts does not resize charts inside tabs
- Highcharts - CUSTOM DATA LABELS in line series, are disappearing on window resize
- Hidden Highcharts not sizing correctly until window resize
- How to scale Highcharts height on window resize with React
- Highcharts Graph displays correctly ONLY on Window Resize
- Use of DotNet HighCharts dll to make charts in code behind
- Highcharts - margins update on window resize
- Highcharts chart resize on window resize event after setting a specific size
- Highcharts checkboxes multiply when window resize event fires
- HTML table as data source for highstock charts using highcharts
- highcharts zooming over line charts not working properly
- Highcharts doesn't resize properly once expanded
- Why code of Horizonal line(y-axis) on a single in Highcharts get applied to all other charts integrated with Webdatarocks
- Highcharts 8 - Changing Chart Type on Window Resize
- Resizing Highcharts legend on window resize
- highcharts pie window resize issue
- How to resize Highcharts chart on KendoUI/Angular Window resize
- HighCharts and idTabs - Charts width not setting properly
- highcharts image not resized after window resize
- Maximum bar width in Highcharts column charts
- Resize height with Highcharts
- Resize data points with highcharts
- Highcharts Error #16: charts not showing on the same page
- Highcharts Pie charts get the selected pie id
- Highcharts: Chart does not resize properly by making the screen smaller
- Highcharts - how to properly update series[0].data and yAxis title of a VUMeter?
- Resize highcharts using react-grid-layout not working
More Query from same tag
- Highcharts: Not plotting correctly with Y-Axis label formatter
- Highcharts column color
- Highcharts Using Data from Ruby on Rails Database
- How to draw an outer border for a donut chart - Highcharts
- Word Cloud from Highcharts - Create a placement strategy so words are ordered from highest weight to lowest
- Wrong x-axis position and formatting when only 1 data series sent to chart
- Space between columns
- Highcharts yAxis max not working
- highcharts datetime x-axis custom formatting
- Hightlight x-axis label in Highcharts
- Set enable/disable 3D mode with Highcharts
- Min/Max on x-axis not honored in Highstocks version of xrange chart
- Highcharts Pie Chart Label Threshold
- Wrapping a HighChart in AngularJS
- JSON-Object as string: Use of concat(), eval() and/or JSON.parse()?
- Need a single border for stacked bar graph in Highcharts
- Highcharts: Synchronise irregular data series from same day different year
- How to extend or highlight a horizontal line in Highcharts?
- HighCharts cannot display the loading symbol. Variable is out of scope
- Add Data text on top of Bars (vertical) - Highcharts Bar charts
- TypeError: undefined is not a function when using highchart
- Button to show all legend items in highcharts
- Charts,Server Side or Client Side?
- highcharts not given the right xAxis labels on page load
- Highcharts afterAnimate in combination with xAxis max
- Highchart, diffrent number of categories and series data
- How to convert Number 23.0 to Number 23.00?
- Line chart not drawn to scale
- Highcharts solidgauge default tooltip position
- How can i add time to xAixs of a ColumnRange Chart in HighChart?