New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Highcharts not loading to width of the parent div #5783

Closed
panickerr opened this Issue Oct 5, 2016 · 4 comments

Comments

Projects
None yet
5 participants
@panickerr

panickerr commented Oct 5, 2016

Expected behaviour

Chart loads in the same size as the parent.
Have used width: 95% and height:75vh to the div in which highchart loads
<div id="g1" style="width: 95% ;height:75vh" ></div>

Actual behaviour

Chart always exceeds the parent div onload.
On landing on the page the chart when loaded is exceeding the parent div. But when i call the function again it refreshes and fits in the parentdiv. So to make sure it fits in the parent div i am forced to call the function twice while initializing in which case the first call gives a zoomed version of highcharts and the successive second load gives the version that fits in the div.

Live demo with steps to reproduce

Affected browser(s)

Firefox, Chrome

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Oct 5, 2016

Contributor

Hi @panickerr

Could you recreate issue in jsFiddle? I created a simple demo: http://jsfiddle.net/7hq7nwu9/ - looks fine (latest Chrome + OSX).

Thanks!

Contributor

pawelfus commented Oct 5, 2016

Hi @panickerr

Could you recreate issue in jsFiddle? I created a simple demo: http://jsfiddle.net/7hq7nwu9/ - looks fine (latest Chrome + OSX).

Thanks!

@JllyGrnGiant

This comment has been minimized.

Show comment
Hide comment
@JllyGrnGiant

JllyGrnGiant Jun 20, 2017

@pawelfus @panickerr
I believe I am experiencing this issue as well.

If you render the chart in a JQuery Element in memory then add that element to the page there's an issue with chart sizing post v5.0.10.

Expected:
http://jsfiddle.net/5dg1ojft/2/

Actual:
http://jsfiddle.net/nws9oo9L/2/

Important to note, in the repro, if you resize the browser, the chart then sizes itself correctly for some reason. I believe reinforces what the original poster was commenting on where if they called the initialization function again then it rendered correctly.

JllyGrnGiant commented Jun 20, 2017

@pawelfus @panickerr
I believe I am experiencing this issue as well.

If you render the chart in a JQuery Element in memory then add that element to the page there's an issue with chart sizing post v5.0.10.

Expected:
http://jsfiddle.net/5dg1ojft/2/

Actual:
http://jsfiddle.net/nws9oo9L/2/

Important to note, in the repro, if you resize the browser, the chart then sizes itself correctly for some reason. I believe reinforces what the original poster was commenting on where if they called the initialization function again then it rendered correctly.

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Jun 21, 2017

Contributor

Workaround
Call setSize after appending a container:

Contributor

sebastianbochan commented Jun 21, 2017

Workaround
Call setSize after appending a container:

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Jun 21, 2017

Collaborator

This happens because in v5.0.10, the container was first moved to a temporary div in the document, then the chart rendered. In v5.0.11 we reformatted it to preserve the DOM structure but rather temporary display all elements in order to read the text bounding boxes. That's why it doesn't work correctly now, because the container is detached from the DOM all the way.

Here's a demo without jQuery: http://jsfiddle.net/highcharts/3z0stcfe/1/

Collaborator

TorsteinHonsi commented Jun 21, 2017

This happens because in v5.0.10, the container was first moved to a temporary div in the document, then the chart rendered. In v5.0.11 we reformatted it to preserve the DOM structure but rather temporary display all elements in order to read the text bounding boxes. That's why it doesn't work correctly now, because the container is detached from the DOM all the way.

Here's a demo without jQuery: http://jsfiddle.net/highcharts/3z0stcfe/1/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment