Highcharts - Hidden charts don't get the right size

Question

I currently have 3 tabs. Each tab is a div that is set to display: hidden when not selected. In these tabs, I have a grid system created using Susy (compass plugin). Also on each tab there is a set of Highcharts. When I load a page, depending on which tab is in the URl, one of the tabs loads. All charts look great, however, when I switch to another tab, some of the charts are not set correctly in my div. If I just resized the window, the graphs are recounted, and then they are perfect. Or, if I reload the same tab, the graphs are also suitable. Can I call a function that will resize all the diagrams on the page when I make my tab switcher?

It looks like this:

when it should look like this:

EDIT: It seems like this is not a problem directly related to highcharts, for example, my google maps look like this:

but when I resize the window, it is configured correctly:

Is it possible to update / customize CSS in grids via function call in JS when switching tabs?

Answer 1

What worked for me causes:

 $(window).resize(); 

When I load a new tab. There are still issues with the Google Maps API, but it works great with Highcharts.

Answer 2

You will find many problems when trying to reproduce things that start with "display: none". While $ (window) .resize () can work in many cases, I would suggest trying to first display your page before displaying: none take effect. A possible solution would be to set the opacity: 0 or visibility: hidden.

The display attribute is what controls how your element will be displayed, such as a block (100% width) or inline (matching content). When an element has a display of: none, it cancels it, eventually removing its effective width and height until that element gets a block type.

Here is an example demonstrating: http://jsfiddle.net/m2f3scmm/3/

 <div id="log1" style="display: none;"> </div> <div id="log2" style="visibility: hidden;"> </div> <div id="log3" style="opacity: 0"> </div> 

When using the "resize" hack, you assume that the plugin or script that you are using is bound to a window resizing event, which is not always the case. Running window.resize can also slow down rendering or cause unwanted effects (for example, small animation charts run on the first rendering - which looks lame when it happens every time the tab changes).

Answer 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 } } 

Using

 $(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 boot tab

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var 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 the 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> 

See jsfiddle http://jsfiddle.net/davide_vallicella/LuxFd/2/