0

What I have done are something like :

  1. I have plenty of plots(say 30) that needed to be showing.
  2. I separate these 30 plots into several groups(say 3).
  3. When the page loads. the plots are all loading from the ajax requests, while only one group will be shown(depending on the button user click)

Now, the problem is, every plot is wrapped by a div which has a min-width,and at the first time I load the page, 20 of them are hidden.

When user click a button to show another groups of plot , the widths are not correctly set.

I write a very quick demo to show my problem here: http://jsfiddle.net/k5adky9d/4/

<div id="wrapper" style="min-width:300px; display:none"><!--please remove the display:none here to view the correct results-->
 <h2>plot subject</h2>
  <div id="container" style=" height: 400px; margin: 0 auto" >
  </div> 


$(function () {
    //$('#wrapper').hide();//I can also use hide() here if the originally 'display' is not set to none
    $('#btn').on('click',function(){
        $('#wrapper').show();//after show, the plot'width is not adjust to what it should be, it only adjust the the min-width(300px)        
    });
    $('#container').highcharts({...})
})
JaskeyLam
  • 15,405
  • 21
  • 114
  • 149
  • Try setting the width of your `wrapper`. – Sachi Tekina Mar 30 '15 at 07:32
  • Duplicate of [this](http://stackoverflow.com/questions/16436666/highcharts-issue-about-full-chart-width/16440351#16440351) and [this](http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using/23267110#23267110). – Paweł Fus Mar 30 '15 at 08:34

2 Answers2

2

Try reconstructing your JS into like this:

$(function () {
    $('#btn').on('click', function () {
        $('#wrapper').show(function () {
          .....<highcharts code here>...
        });
    });
});

You can refer to this fiddle.

Sachi Tekina
  • 1,800
  • 5
  • 28
  • 50
0

What worked for me in your js-fiddle was to simply put "width:100%;" in your inline style like this

 <div id="container" style="width:100%; min-width: 300px; height: 400px; margin: 0 auto" >
NachoDawg
  • 1,533
  • 11
  • 21
  • Please check my updated link and question, It does not perfectly fit to the correct width – JaskeyLam Mar 30 '15 at 07:43
  • @jaskey, any reason the container cant have "width:100%;"? It really seems to be solving your problems setting a width on the container, while setting min-width on the wrapper. – NachoDawg Mar 30 '15 at 07:52