Chart missized when exiting full screen

[Lark]

Hello!
I am required to make an external button to toggle the full screen view of a chart, in a page with multiple charts.
In my development environment (React) I find that, after exiting full screen with Esc, the chart does not return to its original size.

Here is the chart (painted gray) before pressing the little full screen button:

normal_chart.png (30.63 KiB) Viewed 3831 times

After exisitng fullscreen with Esc, this is what happens to all charts in the page (you can see the other charts' background overflowing there, with their white rectangles):

overflowing_chart.png (10.74 KiB) Viewed 3831 times

I recreated my piece of code in a this Sandbox but the bug doesn't occur there, so I cannot seem to recreate it.

Also, the full screen feature acts weird with the browser: if I have Devtools open, and then go into full screen, when I go back out Devtools is suddenly closed and becomes unopenable, but remains permenantly open inside of full screen.
I know the information I provided isn't too helpful so if anyone has any idea of what I'm doing wrong to recreate the issue I'd love to know.

I would LOVE to resolve this please!
Thank you.

[Lark]

I have also tried using the module way, i.e.:

Code: Select all

import Highcharts from 'highcharts';
import HighchartsFullscreen from 'highcharts/modules/full-screen';

HighchartsFullscreen(Highcharts);

...
const Chart = () => {
  const chartRef = useRef<HighchartsReact.RefObject>(null);

  const enterFullscreen = useCallback(() => {
    if (!chartRef.current) return;
    chartRef.current.chart.fullscreen.open();
  }, []);
  
  return (
  <HighchartsReact
    highcharts={Highcharts}
    options={options}
    ref={chartRef}
  />)
}

But the behaviour is the same.

Actually, it seems this happens even when using the built-in context menu "View in Full Screen" option, so I'm stumped.

[mateusz.b]

Hi Lark,

Thanks for contacting us with your question.

It is really hard to tell what causes that issue, because the demo seems to work correctly. Firstly, I would suggest checking your highcharts version. There used to be an issue which was very similar to what you described, however it is fixed in current version. More information about it along with some workaround that you might want to try anyway you can find here: https://github.com/highcharts/highcharts/issues/13222

Also, it seems that you use requestFullscreen() method. Instead, I would recommed trying our Fullscreen module.
Demo: https://stackblitz.com/edit/react-mtyguc?file=index.js

If you want to stick to your implementation anyway, then you should try to call chart.reflow() method every time you exit full screen. The method forces chart to reflow and to fit its container.

Let me know if that was what you were looking for!
Regards!

[Lark]

Also, it seems that you use requestFullscreen() method. Instead, I would recommed trying our Fullscreen module.
Demo: https://stackblitz.com/edit/react-mtyguc?file=index.js

I did in face implement with the FullScreen module just after posting.
I do have an update now - when exiting full screen, the bug occurs on all charts on the page EXCEPT the one I clicked.
I.e. the chart I went into fullscreen with shrinks correctly but all the other go wack.

overflowing_chart_3.png (87.12 KiB) Viewed 3787 times

You can see what the layout of such a chart looks like from devtools. The one below it is the one that went into fullscreen - it looks fine.
Of course, in the Sandbox demo everything works fine.

I double checked my package version and it is up to date.

If you want to stick to your implementation anyway, then you should try to call chart.reflow() method every time you exit full screen. The method forces chart to reflow and to fit its container.

Actually, reading how reflow works, it stand to reason that the chart I select actually does reflow (because it's the one being changed), but the rest don't, after the full screen. Could you please elaborate how I would incorporate reflow into all these charts on the same page, when one of them leaves fullscreen?

I had also considered that maybe I defined something wrong in my options.
In the Sandbox you'll find a JSON with the options object taken directly from the chart ref in my code.

Please let me know if I can provide any useful information to solve this.
Thanks.

[Lark]

After some fiddling we found that after going into full screen, all container sizes on the page change.
I assume now that the chosen chart reflows by default when exiting full screen, but the others don't.
So I need to manually listen to screen resizes and ask the other charts to reflow, right?
Is there any recommended way of doing this?
But if all charts have reflow enabled by default, and they are wrapped with the React wrapper, shouldn't they be reflowing whnever the wrapper changes?
Or am I missing something?

[Lark]

I finally managed to recreate the bug!
https://codesandbox.io/s/competent-fran ... rc/App.tsx
The grid contains card which contain charts, and the grid filld some container (the root in this case).
Once you go into fullscreen with Chart 1, then go out, Chart 2 is messed up, and vice versa.

[Lark]

I finally managed to do the workaround suggested in the open Github issue, it worked for me (gladly) but I was under the impression the issue was fixed, and so it clearly wasn't I guess.
You can have my sandbow as a further example, please let me know if I can provide any other info.
Thanks for the help anyway!

[mateusz.b]

Hi Lark,

Sorry for slightly longer response time. Thanks for the demo and of course I will investigate the issue further. If it still doesn't work correctly I will reopen the github ticket.

Regards!

[mateusz.b]

Lark,

It seems like there is a problem with chart's parent and flex-grow: 1 property. Could you try to set position: relative for chart's parent element and absolute with some additional opions for chart component? I think this solution should be more consistent.
Demo: https://codesandbox.io/s/wizardly-feynman-frgfe

Let me know if it works for you.
Regards!

[Lark]

Thanks for the suggestion!
I applied position: relative to the parent container (and made sure to remove the workaround from before), and even without setting the react container as absolute, it solved the issue. In the Sandbox it does not work without setting absolute, though.
This looks perfect now.
Thank you

[mateusz.b]

You're welcome! I'm glad we figured it out. In case of any further questions, feel free to contact us again.

Regards!

[Keerthi Hangal]

I have a set of 6 charts aligned one below the other.
I'm triggering highcharts full-screen event for all the 6 visuals. The issue is, the focus is moving to top of the screen after exiting (ESC) from full-screen. This is happening only for the last chart that i.e., chart at bottom.
Any help would be greatly appreciated. Thanks in advance

[mateusz.b]

Hi Keerthi Hangal,

Thanks for contacting us with your question.

Could you try to prepare a simplified live demo with the issue? You can start here: https://jsfiddle.net/BlackLabel/Ltd4b8f0/

Regards!

[Keerthi Hangal]

Here's a simple jsfiddle exmaple. https://jsfiddle.net/dr6hswtc/
Upon clicking Escape in fullscreen for the last chart i.e., "Chart 5" , the focus is moving to chart 3 after returning to main screen.

[mateusz.b]

Hi Keerthi Hangal,

Thanks for the demo.

In this case you can use recently introduced event; fullscreenClose:
https://api.highcharts.com/highcharts/c ... creenClose

You can get the reference to the chart container and then use scrollIntoView to scroll back to the chart after full screen exit:
https://developer.mozilla.org/en-US/doc ... llIntoView

Demo: https://jsfiddle.net/BlackLabel/yz7L1j5o/

Let me know if it was what you were looking for.
Regards!