Capturing escape event for Fullscreen in Highcharts - 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:
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.
Update this variable to the correct chart id whenever a chart enters full screen mode.
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.