Highcharts container wider than parent div

Question

My issue sounds very similar to the one here.

I have 4 highcharts wrapped in a <div> inside a .tab-pane. Each .highcharts-container slightly overextends the width of it's parent. I have attempted to set the width of the chart to 100% but truncates the chart which is not ideal.

HTML

<div class="tab-pane maxHeight" id="show_graph">
    <div class="row maxHeight maxWide">
        <div class="bottomWrapperTable col-md-12 col-sm-12 col-lg-12 col-xs-12 noPadLeft noPadRight">
            <div class="row">
                <div id="graph_bar_month" class="graph col-lg-6 col-md-6 col-sm-6"></div>
                <div id="graph_bar_teamPercent" class="graph col-lg-6 col-md-6 col-sm-6"></div>
                <div id="graph_line_year" class="graph col-lg-6 col-md-6 col-sm-6"></div>
                <div id="graph_bar_teamActual" class="graph col-lg-6 col-md-6 col-sm-6"></div>
            </div>
        </div>
    </div>
</div>

Like the issue I have linked to, this error only occurs on page load. For example, I can resize the page and maximise it again and it will be fine. I have attempted to invoke the reflow() method to fix this as mentioned in one of the answers in that question. (Used comment and this jsFiddle to create it)

jQuery

$('.nav-pills').on('click', function() {
   if($('#show_table').hasClass('active')) {
       $('.bottomWrapperTable').find('.graph').each(function() {
           $(this).highcharts().reflow();
       });
   }
});

This solution has not solved it.

Any help appreciated.

[jsFiddle](http://jsfiddle.net/s3eno9pw/) if you look at `graph_bar_month` in devTools, you can see that the highcharts container is wider than it's parent — wmash, Nov 18 '15 at 17:06
Not getting what you saying. Check this: http://i.imgur.com/9WgQGSM.png — divy3993, Nov 18 '15 at 17:17
If you expand that `
` labelled `#graph_bar_month` and look at the first child within it (has class `.highcharts-container`) and hover over it. The width of that child element exceeds the width of it's parent `#graph_bar_month` — wmash, Nov 18 '15 at 17:25
Check this: [image 1](http://i.imgur.com/jSAg1os.png) & [Image 2](http://i.imgur.com/XNbTMfk.png). — divy3993, Nov 18 '15 at 17:40
I tested that in the newest Chrome and not able to recreate that issue, which version do you have? Problem appears also in other browsers? — Sebastian Bochan, Nov 19 '15 at 14:04
Running 46.0.2490.86. Error also appears in IE 11 and Firefox 41.0.2 — wmash, Nov 19 '15 at 14:29
For me still works fine, see the screenshot: http://pl.tinypic.com/view.php?pic=a9o6ly&s=9#.Vk8V3d8vevM — Sebastian Bochan, Nov 20 '15 at 12:45
@SebastianBochan cannot see your image as my proxy blocks it :( — wmash, Nov 20 '15 at 17:28
Has anyone got any other suggestions as to what might be causing this and how to fix it? — wmash, Nov 20 '15 at 17:28

score 2 · Accepted Answer · answered Nov 25 '15 at 12:56

2

I had padding: 0 !important on .graph which caused this error. When I changed my CSS to...

.graph {
    position: absolute;
    width: 100%;
}

...it worked!

Note: Do not specify a height or width on the chart itself, just on it's parent element

answered Nov 25 '15 at 12:56

wmash

4,032
3
31
69

Highcharts container wider than parent div

1 Answers1