dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

resizing issues..

Hi,
I am having some problems with my chart container resizing to. i have a page with a collapsible side panel. when that pane is collapsed or expanded. the chart container does not resize to fit its content area container - width or height. I dont quite understand why..since if i do size the browser window, it looks like it does try to re-size.
In any event, after researching a bit, i added a function to call reflow() when the transition for the collapsing panel completes. this works now for when the panel collapses - if there is white space to the right of the chart, the chart will resize to fit. However it does not work for when the panel is expanded. the chart will not re-size and instead a horizontal scroll bar is shown.

here is the jsfiddle: https://jsfiddle.net/dizzy0ny/86wjas9L/115/

To reproduce:
1. first size the page manually so no horizonal scroll bar is visible at the bottom.
2. now click 'toggle 1' and the panel will collapse. shortly after that the reflow() event is triggered and the chart resizes correctly with regards to width. No horizonal scroll bar is shown.
3. now click 'toggle 2' again to expand the the panel. you will notice now the chart does not resize and the horizontal scroll bar is visible.

Any help in solving this would be appreciated. i would like the chart to fit in it's parent container both height and width. In the stylesheet i have set those attributes to 100% for the container element
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: resizing issues..

after messing with some CSS to set container display to 'grid', was able to get the chart to re-size properly when the pane is expaned. But would be curious to understand or get an idea what may have contributed to having to manually call reflow as opposed the chart being able to detect and properly size itself?
Are there any styling considerations we should be aware of and avoid?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: resizing issues..

Hi there,

It's good to hear that you have managed to fix this problem by yourself. In short, Highcharts reflow event is fired only on window resize event.
https://api.highcharts.com/class-refere ... tml#reflow
By default, the chart reflows automatically to its container following a window.resize event, as per the chart.reflow option. However, there are no reliable events for div resize, so if the container is resized without a window resize event, this must be called explicitly.
So to achieve that effect, you have to manually fire that event after i.e sidebar is showed. But make sure that the sidebar affects the containers' size that you render your chart to.

Useful links:
https://github.com/highcharts/highcharts/issues/8162
https://stackoverflow.com/questions/666 ... iner-width

In case of any other problems, feel free to contact us here,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”