Полноэкранная панель начальной загрузки с высокими чартами (высота 100%)

У меня есть несколько (начальных) панелей, где я хотел бы иметь возможность показать этот полноэкранный режим. На этих панелях присутствуют графики Highcharts. Проблема в том, что высота старших графиков не адаптируется при переходе в полноэкранный режим, как в случае с шириной. Есть ли возможность автоматически регулировать масштабирование, чтобы соотношение оставалось неизменным?

если это невозможно, я бы хотел, чтобы график был выровнен по середине высоты.

JSFIDDLE

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-6">
<h2>Fullscreen toggle</h2>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
<ul class="list-inline panel-actions">
<li><a href="#" id="panel-fullscreen" class='fullscreen-btn' role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
</ul>
</div>
<div class="panel-body">
<div class="col-lg-8 col-md-8 col-xs-8">
<div id="container"></div>
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<h6>Lorem ipsum dolor sit amet, et sit eros molestiae aliquando, habemus intellegat ut vix. Mea prima vituperata at, his enim dicat verterem cu. Vis vivendo consulatu adversarium in, quo cu iisque percipitur. Ne vix apeirian menandri sensibus,
ea eos probo libris efficiendi, sed no elit etiam scripta. Has an justo semper impedit, diam epicurei percipitur at sed.</h6>
</div>
</div>
</div>
</div>


<div class="col-lg-6 col-md-6 col-xs-6">
<h2>Fullscreen toggle</h2>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
<ul class="list-inline panel-actions">
<li><a href="#" id="panel-fullscreen2" class='fullscreen-btn' role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
</ul>
</div>
<div class="panel-body">
<div class="col-lg-8 col-md-8 col-xs-8">
<div id="container2"></div>
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<h6>Lorem ipsum dolor sit amet, et sit eros molestiae aliquando, habemus intellegat ut vix. Mea prima vituperata at, his enim dicat verterem cu. Vis vivendo consulatu adversarium in, quo cu iisque percipitur. Ne vix apeirian menandri sensibus,
ea eos probo libris efficiendi, sed no elit etiam scripta. Has an justo semper impedit, diam epicurei percipitur at sed.</h6>
</div>
</div>
</div>
</div>

</div>
</div>

JS

$(document).ready(function() {
var chart1Info = {
containerId: 'container',
definition: {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
}
};
var chart2Info = {
containerId: 'container2',
definition: {
title: {
text: 'Chart2 Title'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
}
};

function drawChart(chartInfo) {
// Properties that vary by chart should be defined in chartInfo
// Any properties that are the same for all charts are added here
chartInfo.responsive = {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
};
Highcharts.chart(chartInfo.containerId, chartInfo.definition);
}
//Toggle fullscreen
$(".fullscreen-btn").click(function(e) {
e.preventDefault();

var $this = $(this);
$this.children('i')
.toggleClass('glyphicon-resize-full')
.toggleClass('glyphicon-resize-small');
$(this).closest('.panel').toggleClass('panel-fullscreen');
var chartInfo = $this.attr("id") === 'panel-fullscreen' ? chart1Info : chart2Info;
console.log($this.id, chartInfo);
drawChart(chartInfo);
});
drawChart(chart1Info);
drawChart(chart2Info);
});

CSS

.panel-actions {
margin-top: -20px;
margin-bottom: 0;
text-align: right;
}

.panel-actions a {
color: #333;
}

.panel-fullscreen {
display: block;
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}

Надеюсь, кто-то может помочь мне решить эту проблему. Заранее спасибо!!