setSize and hidden container

[slawekkolodziej]

When a chart is rendered for the first time it doesn't matter if the container is hidden via "display: none" or not, but it does when you try to use setSize.

Take a look at this example: http://jsfiddle.net/hfrntt/t2HF7/14/

[TorsteinHonsi]

The basic problem is that we can't run .getBBox to read the size of a text within a hidden container. In the first case, when the chart is initially drawn, we have worked around this by moving the chart out to create it in a visible container off the viewport. In the second case, when the user sets display:none explicitly, we don't do this.

The fix would be that chart.redraw did the same as chart.render, namely detect whether the container has an offsetWidth, and move it temporarily out if it doesn't.

[TorsteinHonsi]

A workaround for implementers is to not use display: none, but rather "position:absolute; top: -9999em" for hiding the container.

[slawekkolodziej]

I'm aware of the problem. Anyway, could you say a word in this topic: http://highslide.com/forum/viewtopic.php?f=9&t=13531

[juanjo]

display: none, but rather "position:absolute; top: -9999em" <<< This is not always possible. e.g., If you are using a plugin for creating tabs and that one uses display:none, you can not do that.

[cailie]

Great to see this progress on hidden container compatibility!

Please see the original example, but using the latest code on master: http://jsfiddle.net/t2HF7/22/. Click the "Resize Visible" and "Resize Hidden" buttons multiple times. You will see the legend box grow in size with every click.

[TorsteinHonsi]

Thanks Cailie! We're aware of the ever growing legend box issue, it's
related to some changes we made to the legend symbol logic.

[cailie]

Ha ha,... thanks, I'm sure you'll get to it.
Cheers

[cailie]

Oh -- you've already fixed it in cf3ba57
:D

[TorsteinHonsi]

Just needed someone hanging over my shoulder :D

[wergeld]

Not sure why but http://jsfiddle.net/t2HF7/22/ still renders just a grey box with the 4 buttons for me on FF12. But in IE8 it shows just the 4 buttons first then I am able to toggle the chart. The last button causes a broken chart to appear - looks like the line stops rendering for the points.

[cailie]

There were a few little unrelated JS errors in Firefox. Here is the example again: http://jsfiddle.net/t2HF7/23/.

That said, I did notice that Firefox experiences an error when the "Resize Hidden" button is clicked.

The error is:
Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMSVGLocatable.getBBox]
return !this.box.getBBox().width; highcharts.src.js (line 2745)

As for Internet Explorer, it won't let you run the raw source from github for security reasons ("blocked due to mime type mismatch").

[TorsteinHonsi]

The fix above cures the JS error in Firefox.

For debugging in IE9, use http://code.highcharts.com/master/highcharts.js that runs the latest code from GitHub through our own webserver to overcome the mime type mismatch.

[cailie]

Right -- I should have referenced your nice file service, http://code.highcharts.com/. Thanks!

[cxytomo]

It doesn't work for when I use new Highcharts.Chart({option}) instead of $('#id').highcharts({}); After reflow(), the chart is till little bit wider then the container. And I want the chart to be responsive. Anyone help me?

[cxytomo]

@slawekkolodziej Hi, I come across this problem and tried every solution I can find. This morning I fixed it. I don't hide the container by 'display:none'. instead, I set 'position: absolute;'. I tried 'top:-9999em' but failed. So don't change the position,' top:0;left:0'. use'opacity and z-index'to hide and show the element you want. This is the solution I find and it perfectly works for me.