CODEWITHSUNDEEP
javascripthighcharts
Katharine Osborne
Katharine Osborne

Reputation: 7031

How to add fullscreen event to a Highchart?

I've been trying to add a fullscreen event to a highchart chart with no success. I've tried extending highcharts:

Highcharts.Chart.prototype.callbacks.push(function (chart) {
   Highcharts.addEvent(chart.container, 'webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function (e) {
       console.log('in fullscreen nonsense');
       this.reflow();
   });
});

And the fullscreen option is added in the chart menu:

var fullscreen = {
    text: 'Toggle full screen. ESC to exit',
    onclick: function () {
        function launchIntoFullscreen(element) {
            var parentEl = element.renderTo;
            if(parentEl.requestFullscreen) {
                parentEl.requestFullscreen();
            } else if(parentEl.mozRequestFullScreen) {
                parentEl.mozRequestFullScreen();
            } else if(parentEl.webkitRequestFullscreen) {
                parentEl.webkitRequestFullscreen();
            } else if(parentEl.msRequestFullscreen) {
                parentEl.msRequestFullscreen();
            }
        }
        launchIntoFullscreen(this);
    }
};
Highcharts.getOptions()
          .exporting.buttons.contextButton.menuItems.push(fullscreen);

The chart correctly goes fullscreen, but when it does I want it to reflow and fill the available area. However, it's not hitting the fullscreen event attached to the chart. I've tried attaching it to both the chart and the chart container. I've tried just one of the variations of browser-specific fullscreen events. When I use 'click' instead, the event callback is triggered.

I've also tried reflowing in the launchIntoFullScreen function, and that doesn't work either (even if I make the chart a global variable).

It's possible that fullscreen doesn't provide reflow with new dimension information, but I'm not sure. I'm using Chrome.

Upvotes: 0

Views: 5272

Answers (2)

duxk.gh
duxk.gh

Reputation: 171

In the current version of Highcharts (8.1.0) this can be done using the chart.fullscreen.toggle() function.

Highcharts have an example on jsfiddle. The code in case that goes down:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>


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

<script>
    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();
    });
</script>

Upvotes: 1

wpcoder
wpcoder

Reputation: 1054

create an icon and bind click function to it. create a class and on click add this class to the chart container, make the image z-index top

.modal {
    position: fixed;
    width: 1000px;
    height: 485px !important;
    top: 0px;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
}
.modal  #moodcontainer{
    height: 485px;

}

then run this function:

$(function(){
$("#ExpandIcon").click(function() {
        $("#moodcontainer").toggleClass('modal');
        $("#moodcontainer").highcharts().reflow();
    });
});

that should do the job. the .reflow() will refresh the chart once the div container gets fullscreen

You can also bind click function to the chart body as well.

$('.chart-container').bind('mousedown', function () {
        $(this).toggleClass('modal');
        $('.chart', this).highcharts().reflow();
    });

Upvotes: 0

Related Questions