After print chart another chart is not visible in page - highcharts

Question

I am using two instance of high chart(Highcharts.JS v4.1.6) parallel, but when i tried to print the chart using export functionality, another chart gets invisible when print command gets completed.
Chart configuration:
var chart1, chart2;
var options, options2;
options = {
title: {
text: '',
floating: true,
align: 'left',
width: 610,
style: {
fontSize: '1.4em'
}
},
chart: {
renderTo: 'content1',
type: 'bar',
marginLeft: 210,
marginTop: 80,
spacingBottom: 15,
spacingLeft: 10,
spacingRight: 10
},
credits: {
enabled: false
},
credits: {
text: 'Source: xxxx',
href: '',
position: {
align: 'right',
x: -30,
y: -3
}
},
exporting: {
buttons: {
contextButton: {
align: 'right',
x: 2,
y: 10,
text: 'Download',
verticalAlign: 'top'
}
}
},
xAxis: {
categories: [],
labels: {
step: 1,
enabled: true,
formatter: function() {
var text = this.value,
formatted = text.length > 25 ? text.substring(0, 30) : text;
return '<div class="js-ellipse" style="width:150px; overflow:hidden" title="' + text + '">' + formatted + '</div>';
},
style: {
fontSize: '12px'
}
}
},
yAxis: {
max: 100,
plotLines: [{
color: 'black',
dashStyle: 'Solid',
value: 0,
width: 2
}, {
color: 'black',
width: 2,
value: 50
}
],
title: {
text: ''
},
},
legend: {
itemStyle: {
color: '#000000',
fontWeight: ''
},
layout: 'horizontal',
align: 'center',
x: 1,
verticalAlign: 'top',
y: 35,
floating: true,
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
style: {
padding: 30
},
formatter: function() {
return '' +
'<strong>' + this.x + '</strong><br>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1) + "%";
}
},
plotOptions: {
series: {
grouping: true,
pointPadding: 0,
borderWidth: 0,
dataLabels: {
enabled: true,
crop: false,
formatter: function() {
return this.y.toFixed(1);
}
}
}
},
series: [],
}
options2 = {
title: {
text: ''
},
chart: {
renderTo: 'content2',
type: 'bar',
spacingBottom: 15,
spacingLeft: 10,
spacingRight: 10,
marginTop: 80
},
credits: {
text: 'Source: xxx',
href: '',
position: {
align: 'right',
x: -30,
y: -3
}
},
exporting: {
buttons: {
contextButton: {
align: 'right',
x: 2,
y: 10,
text: 'Download',
verticalAlign: 'top'
}
}
},
xAxis: {
categories: [],
labels: {
enabled: false,
step: 1,
overflow: 'justify',
crop: false,
formatter: function() {
var text = this.value,
formatted = text.length > 25 ? text.substring(0, 30) : text;
return '<div class="js-ellipse" style="width:150px; overflow:hidden" title="' + text + '">' + formatted + '</div>';
},
style: {
fontSize: '12px'
}
}
},
yAxis: {
plotLines: [{
color: 'black',
dashStyle: 'Solid',
value: 0,
width: 2
}],
title: {
text: ''
},
},
legend: {
itemStyle: {
color: '#000000',
fontWeight: ''
},
layout: 'horizontal',
align: 'center',
x: 1,
verticalAlign: 'top',
y: 35,
floating: true,
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
style: {
padding: 30
},
formatter: function() {
return '' +
'<strong>' + this.x + '</strong><br>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1) + "%";
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
crop: false,
formatter: function() {
return this.y.toFixed(1);
}
}
}
},
series: [],
}
Before Print chart:
After Print when left side chart export print button used:
After Print when right side chart export print button used:
This will happen when print chart is used otherwise it work well.I couldn't figure out the issue.Please help me.
Thanks.

Answer 1

I have refer the below code that resolved my issue.
var beforePrint = function()
{
chart1 = jQuery('#content1').highcharts();
chartWidth1 = chart1.chartWidth;
chartHeight1 = chart1.chartHeight;
chart1.setSize(578,chartHeight1, false);
chart2 = jQuery('#content2').highcharts();
chartWidth2 = chart2.chartWidth;
chartHeight2 = chart2.chartHeight;
chart2.setSize(405,chartHeight2, false);
};
var afterPrint = function() {
chart1.setSize(chartWidth1,chartHeight1, false);
chart1.hasUserSize = null; // This makes chart responsive
chart2.setSize(chartWidth2,chartHeight2, false);
chart2.hasUserSize = null; // This makes chart responsive
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;