Toggle button visibility on iframe fullscreen with highcharts

Question

I am using high charts, and am testing the toggle fullscreen button seen here https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/chart-togglefullscreen/

The issue I am having is that once the high charts iframe fills the screen the toggle button is hidden, and I can no longer toggel back without hitting escape, which defeats the purpose of the toggle button.

Here is the js

var chart = Highcharts.chart('container', {
    credits: {
        enabled: false
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }],

    navigation: {
        buttonOptions: {
            enabled: false
        }
    }
});

// The button handler
document.getElementById('button').addEventListener('click', function () {
    chart.fullscreen.toggle();
});

html

<div id="container" style="height: 300px; margin-top: 1em;"></div>
<button id="button">Toggle fullscreen</button>

I have tried z-index with position values on both elements but the toggle button is always hidden. Is there a way to have the toggle button sit in the Iframe, or sit above it so I can fire it and close the fullscreen on a button click event (the toggle event)

Thanks ahead of time, if you have any ideas here.

ppotaczek ppotaczek · Accepted Answer · 2021-03-19T11:27:54

As a solution you can add a button as a child of a chart container, for example:

    chart: {
        ...,
        events: {
            render: function() {
                var chart = this,
                    x = 10,
                    y = chart.plotTop + chart.plotHeight + 50;

                if (!chart.customToggleBtn) {
                    chart.customToggleBtn = chart.renderer.button(
                        'Toggle fullscreen',
                        null,
                        null,
                        function() {
                            chart.fullscreen.toggle();
                        }).add();
                }

                chart.customToggleBtn.attr({
                    x: x,
                    y: y
                });
            }
        }
    }

Live demo: https://jsfiddle.net/BlackLabel/fbcmg392/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button

Toggle button visibility on iframe fullscreen with highcharts

1 Answers