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
- How to create a bubble chart
- missing the last element of the line
- Stacked column highcharts change x and y
- highcharts: how insert a fix label on a chart
- Highcharts how to pass data from server into chart
- Highcharts timeseries, X-axis min not working
- Unable to pass the value between components using props in react?
- highcharts with only javascript and no jquery
- How do I select which columns from my CSV to chart with HighChart?
- Loading Highcharts within an angular application
- create multiple charts during runtime ssrs
- highcharts pie using javascript array
- Can I use different if-conditions in Highstock-code?
- Manage projections in custom Highmaps
- highcharts pie monochrome: how to set the default color?
- Symfony2 Highcharts-Bundle with dynamic update
- unable to fetch temperature data in highcharts
- Highcharts: Draw line from marker to axis?
- Show logo and menu before Highcharts
- Angular2 highcharts points not appearing
- Vertical line on highchart, with position tied to animation frame from another div?
- How can I customize a Highchart filename?
- What are the plotX, plotY values of a point in HighCharts?
- Error in systemjs using angular2-highcharts
- Highcharts range selector date formats from C#
- Adding a legend to a pie chart using highcharter, or Rcharts
- how to set chart in center on full screen view in highchart
- How to add space between series in stacked columns in HighChart?
- HighCharts WorlMap datalabel translation
- Highcharts.SVGRenderer not working properly with Drill Down