I an facing issue while printing highcharts, i need suggestions how to fix it.
By default we have these exporting options, I have similar six charts below this chart which are in different <div> and have their own ID's. except print option everything works fine, but when i click on print it is taking entire page to print instead of that particular chart, but rest other options working for the chart i click. I've posted two images, please any suggestions would really help.
Here's my code
Code: Select all
<div id="LOIUnitsChart"></div>
Code: Select all
var myChart1 = new Highcharts.chart('LOIUnitsChart',{
credits:{
enabled: false
},
chart: {
reflow: true,
type: 'column'
},
exporting: {
buttons: {
contextButton: {
menuItems: ["printChart","downloadPDF","downloadPNG","downloadJPEG","downloadSVG","downloadCSV","downloadXLS"]
}
},
},
title: {
text: 'YTD LOIs Signed by Week (Units)',
style: {
color: 'black',
fontWeight: 'bold'
}
},
xAxis: [{
title: {
text : '',
style: {
}
},
categories: weeks
}],
yAxis: [ {
title: {
text : '',
style: {
}
}
}
],
plotOptions: {
series: {
borderWidth:2,
borderColor: '#151B54',
color: '#357EC7',
dataLabels: {
enabled: true,
inside: true,
formatter: function(){
return (this.y!=0)?this.y:"";
}
},
events: {
legendItemClick: function() {
return true;
}
}
}
},
series: [{
name: 'Goal',
type: 'area',
borderColor: 'red',
color: '#9BE280',
data: goal,
dataLabels: {
enabled: false
},
marker: {
enabled: false,
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: false
}
}
}
},
{
name: 'Units',
data: units,
point: {
events:{
click: function (event) {
if(event.point.name == this.axis){
var week = 'W'+(this.x+1);
helper.getLOIUnitsRecs(component,event,helper,week);
}
}
}
}
},
{
name: 'Average',
type: 'spline',
color: '#FFA533',
dashStyle: 'dash',
lineWidth: 3,
marker: {
radius: 1
},
data: avg,
dataLabels: {
enabled: false
},
}],
legend: {
enabled: true,
symbolHeight: 12,
symbolWidth: 15,
symbolRadius:0.1
}
});