0

im having a strange problem with my web page which uses jquery, jquery mobile, bootstrap and high charts.

There are 2 highcharts on 2 separate blocks. Initially when i visit the page they layout of the charts looks messed up, but when i resize the window and maximize it, it works fine.

On the highchart containers i have set the width to 100% to make it responsive. But when i remove the width from the div it works fine but i lose the responsiveness

Demo http://vidznet.com/debug/

can someone please tell me what might be causing it?

LiveEn
  • 3,193
  • 12
  • 59
  • 104
  • I think this has something to do with the `width` defined inline as 1600px; Make it a percentage... `` – Louys Patrice Bessette Apr 22 '17 at 21:27
  • @LiveEn in div with `class="highcharts-container" id="highcharts-0"`, where inline style is added. I think this is problem – Deep 3015 Apr 23 '17 at 11:36
  • 1
    This question has been answered many times on SO - basically highcharts is not able to calculate correctly the container's width when the div is not visible - you can use chart.reflow() after the chart is loaded - http://stackoverflow.com/search?q=highcharts+bootstrap+width http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using – morganfree Apr 23 '17 at 15:43

0 Answers0