1

We are facing a great difficulty in rendering HighCharts over the webpages across the website. Below are the links to some instances on our development server where High Charts are not getting rendered properly.

We have already tried all JS and CSS solution available on-line before posting to SO, nothing is worked out for us.

Instance 1: http://128.199.114.135/dashboard-02-portfolio#tab_messages2 [Click on 1st tab Summary to view improper rendering] although if you directly land over the page http://128.199.114.135/dashboard-02-portfolio#tab_home there are no rendering issues.

Instance 2: http://128.199.114.135/search-01-All-mutual-funds-01-scheme-overview#tab_messages2 [Just click over search button leaving all text-boxes empty.] Neither PIE nor HighStocks render properly. Note: If you again click on search the size of pie charts changes.

Instance 3: http://128.199.114.135/product Returns graph on the 3rd section of the page with title "Scheme Returns".

Please let me know if this is due to bad CSS or we are missing out something in CSS. The site has been prepared in Bootstrap framework.

Fakhruddin Ujjainwala
  • 2,493
  • 17
  • 26
  • For pie charts (Instance 1), I noticed that there's a left margin being set. The chart leaves 30px on the left of the container. That can be the reason. Also, I would suggest removing the size property from config object. Setting the size has effects not many people know of. Since you are displaying the labels inside the slices, the chart should by default take 100% of the container. – Rahul Sharma Mar 28 '16 at 04:57
  • Looks like an issue `chart.redraw()` might solve. Have you tried that previously? – Brett DeWoody Mar 28 '16 at 05:04
  • @RahulSharma "removing the size property from config object" can you please guide me on how to do that? – Fakhruddin Ujjainwala Mar 28 '16 at 05:04
  • @BrettDeWoody no I did not think of that because these charts are not getting updated once rendered. Is `chart.redraw()` still required? – Fakhruddin Ujjainwala Mar 28 '16 at 05:05
  • Also, I played around with your css and it seems that the chart (instance 3) is rendered its just blocked by the css. Check [here](http://postimg.org/image/ya01olekr/). – Rahul Sharma Mar 28 '16 at 05:12
  • Removing Size from Config Object: each of your chart has chart options. For each of your pie chart, there's a size property set in pie plotOptions. just remove that property. – Rahul Sharma Mar 28 '16 at 05:16
  • @RahulSharma let me have a look at the property. Will revert back. Thanks. – Fakhruddin Ujjainwala Mar 28 '16 at 05:19
  • @RahulSharma `plotOptions: {pie: {size: 80}},` is his the option I need to look out for? Because currently I do not have any site set explicitly. – Fakhruddin Ujjainwala Mar 28 '16 at 06:53
  • Check [this](http://postimg.org/image/evg0e4v3d/) out. You have this set in all three pie charts, get rid of it. – Rahul Sharma Mar 28 '16 at 16:28
  • Are you sure you have checked properly SO questions? I mean, this looks like exact problem with hidden div and rendering anything inside. When div is hidden, browser returns width = 0, so Highcharts use default width+height for a chart. See better answers [here](http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using). – Paweł Fus Mar 29 '16 at 09:30
  • @PawełFus thanks for the info. I was not aware of hidden `div` issue hence did not try to explore questions related to that section. I would ask my design team to have a look at question referred by you and will update you accordingly. – Fakhruddin Ujjainwala Mar 29 '16 at 09:45

0 Answers0