Bug in Highcharts after exiting the full screen mode

user_1196945 0
Viewed 958

When you open the chart in full screen mode it works as expected: chart is being displayed on the whole screen, but when you exit full screen the original chart stretches to a much bigger height. You can test it here:

https://jsfiddle.net/9b6m438y/

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

How to reproduce: Open context menu in upper right corner of chart, select "View in full screen", then exit the full screen mode and pay attention to the height of the original chart.

How to avoid this?

highcharts fullscreen
2 Answers

It is a controversial thing if it is a bug or not because different browsers different works in the current full-screen module implementation - you can see the whole discussion here: https://github.com/highcharts/highcharts/issues/13222

As a workaround (suggested under the above link) you can set the container height in the CSS.

Demo: https://jsfiddle.net/9b6m438y/

#container {
    height: 400px;
}

If you have your own opinion about it - feel free to take part in the discussion on the GitHub issue ticket.

user_105228420

I had the same problem in higharts@8.2.2.

Reading the comment below the question, I decided to upgrade highcharts to 9.1.0.

the problem is completely solved in this version. because of the major update (8 to 9) my code confronted with few problems that can easily be handled. Hope it works for others too.

user_113096200
Related