CODEWITHSUNDEEP
highcharts
Guillaume S.
Guillaume S.

Reputation: 282

Highcharts charts don't resize properly on window resize

I have 2 side-by-side charts on my page, and would like to have them resized when window is resized: their container is set to 50% width, which, according to examples, should be enough.

A working example of automatically resizing chart can be found @ http://jsfiddle.net/2gtpA/

A non-working example I did to reproduce the issue can be seen @ http://jsfiddle.net/4rrZw/2/

NOTE: you have to resize the frame several times to reproduce the issue (smaller>bigger>smaller should do)

I think it all lies in the way you declare containers... pasting the HTML code as the JS code for highcharts doesn't seem to be relevant here... (same in both examples)

<table style="width:100%;">
  <tr>
    <td style="width:50%;">
        <div id="container" style="height: 50%"></div>
    </td>
    <td style="width:50%;"></td>
  </tr>
</table>

Upvotes: 18

Views: 55497

Answers (3)

Mark Roper
Mark Roper

Reputation: 1389

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.

Upvotes: 22

Davide
Davide

Reputation: 614

/**
 * 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

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

Upvotes: 3

Greg Kramida
Greg Kramida

Reputation: 4254

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.

Upvotes: 19

Related Questions