JSFiddle - React, Tailwind, and code Playground

by nb_nb_nb

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>


<div id='yo'>
    <div>Random Data and text.......</div>
    <div id="container" style="height: 400px; margin-top: 1em"></div>

</div>
<button id="btn">
    Show full screen
</button>

JavaScript

let chart =     Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: ["one", "two", "three"],
        },

        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            endOnTick: false
        },
        series: [
        {
            "name": "books",
            "data": [
            [
            "one",
            64161.71548379661
            ],
            [
            "two",
            3570.6197029028076
            ],
            [
            "three",
            -200.70625619033547
            ]
            ],
            "marker": {
                "symbol": "circle"
            },
        }
        ]
    });

    let btn = document.getElementById("btn")

    btn.addEventListener('click', function() {
      Highcharts.FullScreen = function(container) {
        console.log(container.parentNode.parentNode);
    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);

})