Skip to content
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 · 6 comments
Closed

Highcharts not loading to width of the parent div #5783

panickerr opened this issue Oct 5, 2016 · 6 comments

Comments

@panickerr
Copy link

@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
Copy link
Contributor

@pawelfus 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!

@just-joshing
Copy link

@just-joshing just-joshing 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
Copy link
Contributor

@sebastianbochan sebastianbochan commented Jun 21, 2017

Workaround
Call setSize after appending a container:

@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi 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/

@anupbangale
Copy link

@anupbangale anupbangale commented May 24, 2019

But we can resize it after rendering on the web by using.
window.dispatchEvent(new Event('resize'));
So it will resize and redraw the graph by considering the div width.

Like:-

$('#container').highcharts({this.optionsObject});
window.dispatchEvent(new Event('resize'));

It is something like tricky but It worked for me.

@GuppuBoss
Copy link

@GuppuBoss GuppuBoss commented Oct 1, 2019

But we can resize it after rendering on the web by using.
window.dispatchEvent(new Event('resize'));
So it will resize and redraw the graph by considering the div width.

Like:-

$('#container').highcharts({this.optionsObject});
window.dispatchEvent(new Event('resize'));

It is something like tricky but It worked for me.

Worked for me.
added it on ngOnInit
Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants