Highcharts width exceeds container div on first load

[jja-financial-com]

When viewing a chart in a small screen, the chart overflows and gets hidden under the vertical scrollbar. This issue is reproducible when the vertical scrollbar is not present initially and appears when the chart is fully rendered.

Once a resize happens, chart redraws and the issue is fixed.

highcharts-container seems to be overflowing the container

This issue is actual only for small screens and works fine if scrollbar is not needed or if scrollbar is present without highcharts

Expected behaviour

Y axis labels should not overflow the container

Actual behaviour

Y axis labels seems to overflow the container

Internally in our projects, while using similar configuration, the tooltip is also overflowing outside the chart window

Live demo with steps to reproduce

https://jsfiddle.net/jijojames18/0rdf9sha/52/

Product version

Highstock v11.2.0

Affected browser(s)

All major browsers

[bm64]

Hello @jja-financial-com and thanks for reporting the issue.

Looks like it used to work correctly in v10.3.3 and has been broken since v11: https://jsfiddle.net/BlackLabel/0gv5Lx2c/

[jja-financial-com]

Hello @jja-financial-com and thanks for reporting the issue.

Looks like it used to work correctly in v10.3.3 and has been broken since v11: https://jsfiddle.net/BlackLabel/0gv5Lx2c/

Yes seems like it. We upgraded from 9.3.3 to v11 last month and this issue started from then

[bm64]

Actually, it looks like the issue is reproducible without Highcharts Stock; here is the simplified demo: https://jsfiddle.net/BlackLabel/w59ex4da/

[bm64]

@jja-financial-com

It looks like v11.3 fixed the issue, at least on my end. Could you confirm if it works correctly now?

[jja-financial-com]

@jja-financial-com

It looks like v11.3 fixed the issue, at least on my end. Could you confirm if it works correctly now?

We will upgrade the library and check
Thanks @bm64

[jja-financial-com]

@bm64
We can still reproduce this after upgrading to 11.3.0. This is also still reproducible in the jsfiddle

[bm64]

@jja-financial-com I've tried to recreate the issue with the original jsfiddle, but the labels work correctly on my end: https://jsfiddle.net/BlackLabel/kwmf45t3/
Could you provide me with more information about the problem?

[jja-financial-com]

In the fiddle https://jsfiddle.net/jijojames18/0rdf9sha/52/, when it is first loaded the y axis labels is not fully visible

On resizing the window, labels align correctly

[TorsteinHonsi]

@bm64 @jja-financial-com Are you guys on the same browser and/or system? Windows and Mac may deal with this differently.

[jja-financial-com]

I am using Brave browser on windows

[bm64]

Just have tested it on Windows Chrome and Brave and can confirm that the issue occurs there. However it seems to work fine on Windows Microsoft Edge and macOS in general.