Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container" style="height: 400px; margin-top: 1em"></div>
<button id="btn">
Show full screen
</button>

JavaScript

let chart = Highcharts.chart('container', {

  series: [{
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }]
});

let btn = document.getElementById("btn")

btn.addEventListener('click', function() {
  Highcharts.FullScreen = function(container) {
    this.init(container.parentNode); // main div of the chart
  };

  Highcharts.FullScreen.prototype = {
    init: function(container) {
      if (container.requestFullscreen) {
        container.requestFullscreen();
      } else if (container.mozRequestFullScreen) {
        container.mozRequestFullScreen();
      } else if (container.webkitRequestFullscreen) {
        container.webkitRequestFullscreen();
      } else if (container.msRequestFullscreen) {
        container.msRequestFullscreen();
      }
    }
  };
  chart.fullscreen = new Highcharts.FullScreen(chart.container);
})