Highcharts graph width is incorrect when scrollbar

Question

I'm not sure if this is a bootstrap or highcharts issue but I cannot seem to get my chart to size correctly; the initial chart width is too wide when both a scrollbar is present and in a bootstrap span. Resizing the window never seems to produce widths that are too wide but sometimes they are too narrow.

Removing the code from the span construct seems to result in proper width in all situations so I am thinking that there may be some detrimental interaction between hc and bootstrap.

I made a fiddle to demonstrate, but keep in mind that your browser window will need to be short enough to cause a scrollbar:

http://jsfiddle.net/xEtherealx/Q5EGX/15/

Is there a way I can force the width to conform via css? I can create a callback on window resize as a workaround but I would rather find a proper solution instead.

Edit: As suggested the following is a workaround, and could be called after some timeout or just once after page load:

    this.setChartSize = function() {
        chart.setSize( $(chart.container).parent().width(), $(chart.container).parent().height() );
        return false;
    };

HTML:

<div id="content" class="container-fluid">
    <div class="row-fluid">
        <div id="toresize" class="span3" style="background: gray; overflow: auto;">
            <div class="targetpane">
                 <h4 class="text-center">HC Sizing Test</h4>

                <!-- take up space -->
                <div class="well well-small" style="height: 160px;"></div>

                <!-- Chart -->
                <div class="well well-small" style="padding: 5px;">
                    <div id="barchart" style="height: 160px; margin-bottom: 5px;"></div>
                </div>

                <!-- take up space -->
                <div class="well well-small" style="height: 160px;"></div>
            </div>
        </div>

        <!-- span -->
        <div class="span9" style="background: gray;">
            <div class="myBorder">Some content</div>
        </div>
    </div>
</div>
<script src="http://code.highcharts.com/highcharts.js"></script>

CSS:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.well
{
    background-color: #444;
}

.targetpane
{
    color: #888;
    background-color: #1B1B1B;
    border: 1px solid #888;
    border-radius: 3px;
    padding: 0px 5px 0px 5px;
}

.bodycontainer {
    height: 50px !important;
    white-space: nowrap;
    overflow-x: hidden;
}

JS:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'barchart',
        borderWidth: 1
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

$(window).resize(function () {
    $('#toresize').height($(window).height() - 3);
    console.log($(window).height());
})
$(window).resize();

Answer 1

I found that I could solve this in CSS by forcing the width of the .highcharts-loading class to be 100%. You have to add ! because the element gets a width set on an inline style.

        .highcharts-loading {
            width: 100% !important;
        }

Answer 2

Just adding that per Highcharts chart.event.load documentation:

From version 2.0.4, there is also a second parameter to Highcharts.Chart where a callback function can be passed to be executed on chart.load.

Which is useful when you want to initialize like this:

    $("#chart").highcharts(options, function(e){
        setTimeout(function() {
            e.setSize(container.width(), container.height());
        }, 1);

Or, when you storing JSON configuration options, and don't want to carry around the weight of this repeated code.

Answer 3

The issue is that when page is loaded width of container for Highcharts is different. I think it's due to rendering time (takes more than 1ms), so possible solution is to make sure chart has proper widht nad height after rendering: http://jsfiddle.net/Q5EGX/17/ (see console comments)

setTimeout(function() {
      chart.setSize($("#barchart").width(), $("#barchart").height());
}, 1);