Make highcharts fullscreen also fullscreen the div wrapping the chart

Question

Is there a way to make the div wrapping the chart part of the fullscreen as well?

This is my code: fiddle

THis code only fulscreens the chart. When I try and do to point the div I need in the fullscreen:

Highcharts.FullScreen = function(container) {
        this.init(ontainer.parentNode.parentNode); 
    };

My fullscreen is getting cut off and also not adding the parent div to the full screen. Is there to make the whole div with id yo and the other div inside (<div>Random Data and text.......</div>) as part of the fullscreen?

Answer 1

You can connect the content of a custom element through chart.renderer.text().add() by specifying this element with the html() method:

chart.renderer.text(selector.html(), 0, 0).add();

...hiding this element through css, set the display: none:

.random_data {
    display: none;
}

This is the piece of code to add:

function (chart) {
        chart.renderer
            .text($(".random_data").html(), 10, 10)
            .css({
                color: "green",
                fontSize: "12px",
            })
            .add();
    }

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",
                },
            },
        ],
    },
    function (chart) {
        chart.renderer
            .text($(".random_data").html(), 10, 10)
            .css({
                color: "green",
                fontSize: "12px",
            })
            .add();
    }
);

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);
});

CSS:

.random_data {
    display: none;
}

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 class="random_data">Random Data and text.......</div>
    <div id="container" style="height: 400px; margin-top: 1em;"></div>
</div>
<button id="btn">
    Show full screen
</button>