Highcharts - Hidden charts don't get re-size properly

Question

I currently have a 3 tabbed page. Each tab is a div that is set to display: hidden when not selected. In these tabs I have a Grid system created with Susy (comp

Answer 1

What worked for me is calling:

$(window).resize();

When I load a new tab. Still having the issues with the Google Maps API, but it works great with Highcharts.

Answer 2

/**
 * 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) {
            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 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 on jsfiddle http://jsfiddle.net/davide_vallicella/LuxFd/2/

Answer 3

You will find a lot of issues when you are trying to render things that start off using "display: none". While $(window).resize() might work in many cases, I would suggest trying to first render your page before having display: none take effect. A possible solution would be to set opacity: 0 or visibility: hidden.

The display attribute is what controls how your element will render, for instance block (100% width) or inline (fit contents). When an element has display: none, it overrides this, ultimately removing it's effective width and height until that element receives a block type.

Here is a example to demonstrate: 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 you are using the "resize" hack, you are assuming the plugin or script you are using is binding to the window's resize event which is not always the case. Triggering the window.resize could also slow down rendering or cause unwanted effects (for instance, the little animation highcharts does when first rendering - which looks lame when it happens each time a tab is changed).