Pie Chart - The chart does not display the original size after exiting full screen mode

[madepiet]

Actual behaviour

The initial demo version of the pie chart is displayed as with the given sizes.

After running "View full screen" / "Exit full screen" note that the size of the chart changes (it has been reduced or increased).

The problem occurs in the official Highcharts demo:

https://www.highcharts.com/demo/pie-basic

As well as in the editor with a simplified code:

https://jsfiddle.net/BlackLabel/weo19uvy/

Product version

Highcharts v8.0.4

Affected browser(s)

Chrome 80.0.3987.149

[madepiet]

FYI @raf18seb

[raf18seb]

Thanks for reporting @madepiet
This is a known issue. After exiting from the fullscreen, some browsers restore the original height (height before calling fullscreen) but others don't.

Workaround:
You can define the container's height rigidly (see the updated demo), but then some browsers (like IE11) don't display container in 100% height of fullscreen mode but only with the height that was defined (which is not really a fullscreen).

Maybe we could write the logic that would remember the original height and restore it after exiting from the fullscreen. @sebastianbochan what do you think?

[sebastianbochan]

As a wrokaround you can set width/height in CSS styles. (Works only with values in px, not percents).

Demo:

• https://jsfiddle.net/BlackLabel/qsguhm28/

@raf18seb its good idea and I think that is not also very complicated solution. However we need to verify if (after exit of fullscreen) chart.setSize is not called multiple times. We would like to avoid many re-renders.

[gkemp94]

Hi, we're seeing this in our usage of lines charts and it's actually happening in the demo below on
https://www.highcharts.com/demo/line-basic

We can't set width/height to be static because the chart needs to be responsive with in it's container.

Browser & Operating System
https://www.whatsmybrowser.org/b/D78K2

[v-abkhot]

after setting up fix height to container still issue is not resolved issue. issue is not with the container height it is with SVG height is not reformed.

Please see the attachment

[v-abkhot]

can some body provide inputs on this ?

[sebastianbochan]

@v-abkhot
How about the workaround from the post above?

• https://jsfiddle.net/BlackLabel/qsguhm28/

[v-abkhot]

this is no working that only i have reported

[v-abkhot]

because the issue is not about the container height it is about svg. height

[sebastianbochan]

Please share your live demo i.e reproduced by jsfiddle.net

[v-abkhot]

i have already share screen shot of it what is happening after adding fix width to that container

[v-abkhot]

i have identified the issue... there is issue with svg height

[v-abkhot]

and this need to be fixed.

[v-abkhot]

so can some body actually look into this ?

[sebastianbochan]

Hi @v-abkhot,
The screenshot does not allow us to reproduce the problem, because of missing informations like chart options, CSS styles etc. Please update this demo: https://jsfiddle.net/BlackLabel/0t6necqd/ with your simplified code for the further debugging.

ps. please use edit instead of sending so many short messages.

[v-abkhot]

https://codepen.io/v-abkhot/pen/vYNQxQg?editors=1100

in this second graph when you open in full screen and exit to normal it is modified size

[v-abkhot]

after applying fix height to container

[v-abkhot]

there is height automatic set to SVG in above screen you can see that

[v-abkhot]

i am using react wrapper

[sebastianbochan]

Hi @v-abkhot,
Let me explain how our github issues work.

1. Please, please use the EDIT mode of your messages, it allows us to keep the readability.
2. Always share live demo, if problem is related with native highcharts, report on Highcharts repo, if related only with wrapper, report on wrapper's repo.
3. We have 24h for an answer according to our internal rules. You can find more informations here: http://www.highcharts.com/support
4. Creating many topics and duplicates like: In column The chart does not display the original size after exiting full screen mode highcharts-react#218 or issue with view in full screen option in export menu #13470 increase amount of threads, messages etc. As a result instead of debugging and solve problem, we close and "clean" our repo. Its really time-consuming for all of us in our team.
5. Please be aware, that we have many issues and we need to debug each of them.

[v-abkhot]

@raf18seb you work around is not working for hichart- react

[raf18seb]

Hi @v-abkhot, could you provide a simplified online demo of your chart so I can debug it?

The one you provided: https://codepen.io/v-abkhot/pen/vYNQxQg?editors=1100 is just a demo with 2 charts. You set the height on the first container, but not for the second one - that's why workaround is not working for the second chart.

Please, try to set

#container, #container1 {
  height: 400px;
}

[v-abkhot]

Hi @raf18seb i have added to code pen in that for direct highchart if we set height then it is working fine but if we use it in hichart-react-officials as above screen shot issue with the svg height

https://codepen.io/v-abkhot/pen/vYNQxQg?editors=1100

[v-abkhot]

Hi @raf18seb can you please try this same with hichart-react-officials

[raf18seb]

Here's a workaround snippet working on all browsers except IE. I'll investigate IE further
edit: screen.height works fine for IE so no browsers excluded: https://jsfiddle.net/BlackLabel/6vpgLje5/

(function(H) {
  var addEvent = H.addEvent,
    isMS = H.isMS,
    wrap = H.wrap;

  H.Fullscreen.prototype.open = function() {
    var fullscreen = this,
      chart = fullscreen.chart,
      originalHeight = chart.chartHeight;

    chart.setSize(void 0, screen.height, false);
    fullscreen.originalHeight = originalHeight;

    // Handle exitFullscreen() method when user clicks 'Escape' button.
    if (fullscreen.browserProps) {
      fullscreen.unbindFullscreenEvent = addEvent(chart.container.ownerDocument, // chart's document
        fullscreen.browserProps.fullscreenChange,
        function() {
          // Handle lack of async of browser's fullScreenChange event.
          if (fullscreen.isOpen) {
            fullscreen.isOpen = false;
            fullscreen.close();
            chart.setSize(void 0, originalHeight, false);
          } else {
            fullscreen.isOpen = true;
            fullscreen.setButtonText();
          }
        });
      var promise = chart.renderTo[fullscreen.browserProps.requestFullscreen]();
      if (promise) {
        // No dot notation because of IE8 compatibility
        promise['catch'](function() {
          alert( // eslint-disable-line no-alert
            'Full screen is not supported inside a frame.');
        });
      }
      addEvent(chart, 'destroy', fullscreen.unbindFullscreenEvent);
    }
  };

  wrap(H.Fullscreen.prototype, 'close', function(proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    var fullscreen = this;

    fullscreen.chart.setSize(void 0, fullscreen.originalHeight, false);
  });

})(Highcharts)

[haor3]

hi @raf18seb, how can I use this script in react?

[pawelfus]

@haor3 - right after importing Highcharts:

import Highcharts from 'highcharts';

(function(H) {
...
})(Highcharts);

[haor3]

@pawelfus thanks but the issue still occurs

[raf18seb]

@haor3 could you provide more info? What exactly is not working for you? Could you provide an online demo showing your case so we can take a closer look at it? Thanks!

[siropkin]

@raf18seb thanks for your example, works for me!

i did some changes, mostly add this:

// @see https://github.com/highcharts/highcharts/issues/13220
chart.pointer.chartPosition = null;

because i have problems with mouse position after enter in fullscreen mode.
my version:

export const fullscreenEventListener = (H) => {
  if (!H.Fullscreen) {
    return;
  }

  const { addEvent, wrap } = H;

  H.Fullscreen.prototype.open = function () {
    const fullscreen = this;
    const { chart } = fullscreen;
    const originalWidth = chart.chartWidth;
    const originalHeight = chart.chartHeight;

    // eslint-disable-next-line no-restricted-globals
    chart.setSize(screen.width, screen.height, false);
    // @see https://github.com/highcharts/highcharts/issues/13220
    chart.pointer.chartPosition = null;

    fullscreen.originalWidth = originalWidth;
    fullscreen.originalHeight = originalHeight;

    // Handle exitFullscreen() method when user clicks 'Escape' button.
    if (fullscreen.browserProps) {
      fullscreen.unbindFullscreenEvent = addEvent(chart.container.ownerDocument, // chart's document
        fullscreen.browserProps.fullscreenChange,
        () => {
          // Handle lack of async of browser's fullScreenChange event.
          if (fullscreen.isOpen) {
            fullscreen.isOpen = false;
            fullscreen.close();
            chart.setSize(originalWidth, originalHeight, false);
            chart.pointer.chartPosition = null;
          } else {
            fullscreen.isOpen = true;
            fullscreen.setButtonText();
          }
        });
      const promise = chart.renderTo[fullscreen.browserProps.requestFullscreen]();
      if (promise) {
        // No dot notation because of IE8 compatibility
        promise['catch'](() => {
          // eslint-disable-next-line no-alert
          alert('Full screen is not supported inside a frame.');
        });
      }
      addEvent(chart, 'destroy', fullscreen.unbindFullscreenEvent);
    }
  };

  wrap(H.Fullscreen.prototype, 'close', function (proceed) {
    // eslint-disable-next-line prefer-rest-params
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    const fullscreen = this;
    fullscreen.chart.setSize(fullscreen.originalWidth, fullscreen.originalHeight, false);
    fullscreen.chart.pointer.chartPosition = null;
  });
};

[siropkin]

And one more thing i want to tell about - workaround for scatter plot mouse positioning problems in fullscreen mode.

I thought that I fixed this problem with:

// @see https://github.com/highcharts/highcharts/issues/13220
chart.pointer.chartPosition = null;

But I found out, that this solution not working for a scatter plot.
For scatter you need to add this:

  Highcharts.Pointer.prototype.getChartPosition = function () {
    const { chart } = this;
    const { container } = chart;
    // eslint-disable-next-line no-return-assign
    return (this.chartPosition = Highcharts.offset(container));
  };

[amiram]

I used the code from @siropkin comment. It worked partially. I have class="d-block" on the chart so it takes 100% of the width. However, this is causing the chart width to be as the screen width after exiting full screen. The patch makes the chart itself be in the correct width but its container, the <highcharts-chart> element still has the screen width. I'm using angular.
BTW, if you get that H.Fullscreen is undefined add this code before the function:

import Exporting from 'highcharts/modules/exporting';
Exporting(Highcharts);

[BurntMoney]

Are we going to have an official fix for this? It's very odd that fullscreen is allowed to be in a state like this.

[PaulDalek]

Hi @Blackbaud-TylerGreen

Thank you for contacting us. I have marked the issue with the Inbox label which means it will be raised at the next meeting. Until then, try to use one of the workarounds mentioned earlier.

[Waqar06]

Here's a workaround snippet working on all browsers except IE. I'll investigate IE further
edit: screen.height works fine for IE so no browsers excluded: https://jsfiddle.net/BlackLabel/6vpgLje5/

(function(H) {
  var addEvent = H.addEvent,
    isMS = H.isMS,
    wrap = H.wrap;

  H.Fullscreen.prototype.open = function() {
    var fullscreen = this,
      chart = fullscreen.chart,
      originalHeight = chart.chartHeight;

    chart.setSize(void 0, screen.height, false);
    fullscreen.originalHeight = originalHeight;

    // Handle exitFullscreen() method when user clicks 'Escape' button.
    if (fullscreen.browserProps) {
      fullscreen.unbindFullscreenEvent = addEvent(chart.container.ownerDocument, // chart's document
        fullscreen.browserProps.fullscreenChange,
        function() {
          // Handle lack of async of browser's fullScreenChange event.
          if (fullscreen.isOpen) {
            fullscreen.isOpen = false;
            fullscreen.close();
            chart.setSize(void 0, originalHeight, false);
          } else {
            fullscreen.isOpen = true;
            fullscreen.setButtonText();
          }
        });
      var promise = chart.renderTo[fullscreen.browserProps.requestFullscreen]();
      if (promise) {
        // No dot notation because of IE8 compatibility
        promise['catch'](function() {
          alert( // eslint-disable-line no-alert
            'Full screen is not supported inside a frame.');
        });
      }
      addEvent(chart, 'destroy', fullscreen.unbindFullscreenEvent);
    }
  };

  wrap(H.Fullscreen.prototype, 'close', function(proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    var fullscreen = this;

    fullscreen.chart.setSize(void 0, fullscreen.originalHeight, false);
  });

})(Highcharts)

But using this snippet when you click full-screen view. It only displays a chart on the half screen.

[KacperMadej]

@Waqar06

To test a fix before it gets merged into the master branch you could use the commit hash like in this demo:
https://jsfiddle.net/BlackLabel/6vpgLje5/1/

[stroypet]

Sorry to comment here if not appropriate.

I notice this was fixed 2 days ago and I'm having the same problem right now using the React package.

Is this pushed to the latest npm package yet?

[khlieng]

@stroypet no, it will probably be a few weeks until the next release.