Capturing escape event for Fullscreen in Highcharts

Question

I need to get an event for escape key from fullscreen in highcharts so that I can adjust the height of the container after escaping from fullscreen.

Answer 1

Highcharts requests fullscreen from the browser.

You could listen for various fullscreenchange events, and do some action based on it:

if (document.addEventListener) {
  document.addEventListener('webkitfullscreenchange', exitHandler, false);
  document.addEventListener('mozfullscreenchange', exitHandler, false);
  document.addEventListener('fullscreenchange', exitHandler, false);
  document.addEventListener('MSFullscreenChange', exitHandler, false);
}

function exitHandler() {
  if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
    console.log('Exiting fullscreen. Doing chart stuff.');
    setContainerHeight(); // do your magic
  }
}

See this JSFiddle demonstration or see this discussion on the general case of detecting fullscreening.

Answer 2

While the above works, I thought I'd throw out my solution as it wasn't ideal for my environment (multiple charts on the same page, as described here; partials linked to modules that have different needs).

I ended up using the Highcharts responsive callback option to execute code when a chart is exiting fullscreen mode.

    responsive: {
        rules: [{
            condition: {
                // A callback function to gain complete control on when the responsive rule applies. Return true if it applies
                callback: function () {
                    
                    if (this.chartHeight > (window.innerHeight / 2) || this.chartWidth > (window.innerWidth / 2)) {

                        console.log('responsive cb true:', this.renderTo.id);

                        _fsChartID = this.renderTo.id;
                        return true;

                    } else {

                        console.log('responsive cb false:', this.renderTo.id);

                        if (this.renderTo.id === _fsChartID) { // only hit when exiting fullscreen
                            _fsChartID = null; // reset _fsChartID to prevent infinite loop
                            this.redraw(); // call whatever function you need when exiting fullscreen
                        }

                        return false;

                    }                

                }
            }
        }]
    }

Essentially:

1. Define a variable: _fsChartID to keep track of the which chart is in fullscreen mode. For me, this was defined as a global variable within the module it was needed in.
2. Update this variable to the correct chart id whenever a chart enters full screen mode.
3. If a chart fails the fullscreen test, check and see if its the same ID as the chart that entered fullscreen.
   • If so, reset the _fsChartID variable and do what you need
   • Else, return false as normal

Note that I simply called this.redraw() because my issue was related to the chart not redrawing correctly when exiting full screen.