score:1
taking these suggestions, i wanted to offer a 3rd approach that should solve some of the shortcomings of the previous answers in conjunction with other solutions i have seen elsewhere, resulting in what worked for me (that the above did not).
setting window.onbeforeprint
is fine, unless you have other onbeforeprint
handlers and don't want to blow them away. window.addeventlistener('onbeforeprint', function)
allows you to both set numerous separate event listeners, and remove them when you're done. additionally, safari does not support these specific event listeners anyways, so it is recommended to use window.matchmedia
instead, which is supported on all evergreen browsers.
function _setupprinthandler() {
let chart; // save a local copy so you don't have to find the element again.
var beforeprint = function() {
chart = $('#container').highcharts();
if (chart) {
// set your arbitrary width/height needed for printing
// save the existing chart info if explicitly set
// beforechartwidth = chart.chartwidth;
// beforechartheight = chart.chartheight;
const printwidth = 710, printheight = 450;
chart.setsize(printwidth, printheight, false);
chart.reflow()
}
};
var afterprint = function() {
if (chart) {
// if the previous values were saved, use them, otherwise `null` will return to auto-fit the container size
const prevwidth = beforechartwidth || null;
const prevheight = beforechartheight || null;
chart.setsize(prevwidth, prevheight, false);
chart.reflow();
}
};
// use the new window.matchmedia query with better support
if (window.matchmedia) {
var mediaquerylist = window.matchmedia('print');
mediaquerylist.addlistener(function(mql) {
if (mql.matches) {
beforeprint();
} else {
afterprint();
}
});
}
// fallback if matchmedia isn't available
else {
window.addeventlistener('onbeforeprint', beforeprint);
window.addeventlistener('onafterprint', afterprint);
// use elsewhere if needed:
// window.removeeventlistener('onbeforeprint', beforeprint)
// window.removeeventlistener('onafterprint', afterprint)
}
};
update:
runnable example sans jquery because it's 2020. use the "expand snippet" link to test the print scenario.
highcharts.setoptions({ // apply to all charts
chart: {
events: {
beforeprint: function() {
// not called from global print event
this.oldhasusersize = this.hasusersize;
this.resetparams = [this.chartwidth, this.chartheight, false];
this.setsize(600, 400, false);
},
afterprint: function() {
//not called from global print event
this.setsize.apply(this, this.resetparams);
this.hasusersize = this.oldhasusersize;
}
}
}
});
highcharts.chart('container', {
title: {
text: 'rescale to print'
},
subtitle: {
text: 'the chart size is set to 600x400 and restored after user-prompted print.'
},
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]
}]
});
function _setupprinthandler() {
let beforechartwidth, beforechartheight;
var beforeprint = function() {
// access cached charts without jquery
highcharts.charts.foreach(chart => {
if (chart) {
// set your arbitrary width/height needed for printing
// save the existing chart info if explicitly set
// beforechartwidth = chart.chartwidth;
// beforechartheight = chart.chartheight;
const printwidth = 600,
printheight = 200;
chart.setsize(printwidth, printheight, false);
chart.reflow()
}
});
};
var afterprint = function() {
highcharts.charts.foreach(chart => {
if (chart) {
// if the previous values were saved, use them, otherwise `null` will return to auto-fit the container size
const prevwidth = beforechartwidth || null;
const prevheight = beforechartheight || null;
chart.setsize(prevwidth, prevheight, false);
chart.reflow();
}
});
};
// use the new window.matchmedia query with better support
if (window.matchmedia) {
var mediaquerylist = window.matchmedia('print');
mediaquerylist.addlistener(function(mql) {
if (mql.matches) {
beforeprint();
} else {
afterprint();
}
});
}
// fallback if matchmedia isn't available
else {
window.addeventlistener('onbeforeprint', beforeprint);
window.addeventlistener('onafterprint', afterprint);
// use elsewhere if needed:
// window.removeeventlistener('onbeforeprint', beforeprint)
// window.removeeventlistener('onafterprint', afterprint)
}
};
// run the setup function
_setupprinthandler()
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- don't need exporting anymore -->
<!-- <script src="https://code.highcharts.com/modules/exporting.js"></script> -->
<div id="container" style="height: 400px"></div>
score:2
here is a mix of different solutions, with no need of exporting.js (which adds exporting button to all graphs on page...)
the size is automatically rescaled, then reset after print.
tested mostly on ie
window.onbeforeprint = function() {
$(highcharts.charts).each(function(i,chart){
chart.oldhasusersize = chart.hasusersize;
chart.resetparams = [chart.chartwidth, chart.chartheight, false];
var height = chart.renderto.clientheight;
var width = chart.renderto.clientwidth;
chart.setsize(width, height);
});
}
window.onafterprint = function() {
$(highcharts.charts).each(function(i,chart){
chart.setsize.apply(chart, chart.resetparams);
chart.hasusersize = chart.oldhasusersize;
});
}
update: i now use a different version, fixing the size of each chart instead of using clientwidth. it works on the 3 browsers i tested (ie 11, ff & chrome)
function redimchartbeforeprint(chart, width, height) {
if (typeof(width) == 'undefined')
width = 950;
if (typeof(height) == 'undefined')
height = 400;
chart.oldhasusersize = chart.hasusersize;
chart.resetparams = [chart.chartwidth, chart.chartheight, false];
chart.setsize(width, height, false);
}
function redimchartafterprint(chart) {
chart.setsize.apply(chart, chart.resetparams);
chart.hasusersize = chart.oldhasusersize;
}
window.onbeforeprint = function() {
redimchartbeforeprint($('#chart1').highcharts());
redimchartbeforeprint($('#chart2').highcharts(), 800, 600);
...
};
window.onafterprint = function() {
redimchartafterprint($('#chart1').highcharts());
redimchartafterprint($('#chart2').highcharts());
...
};
score:10
using listener that will trigger reflow for a chart and media queries in css chart should be printed in set size when printing a website.
js:
$(function () {
highcharts.setoptions({ // apply to all charts
chart: {
events: {
beforeprint: function () {
this.oldhasusersize = this.hasusersize;
this.resetparams = [this.chartwidth, this.chartheight, false];
this.setsize(600, 400, false);
},
afterprint: function () {
this.setsize.apply(this, this.resetparams);
this.hasusersize = this.oldhasusersize;
}
}
}
});
$('#container').highcharts({
title: {
text: 'rescale to print'
},
subtitle: {
text: 'click the context menu and choose "print chart".<br>the chart size is set to 600x400 and restored after print.'
},
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]
}]
});
var printupdate = function () {
$('#container').highcharts().reflow();
};
if (window.matchmedia) {
var mediaquerylist = window.matchmedia('print');
mediaquerylist.addlistener(function (mql) {
printupdate();
});
}
});
css:
@page {
size: a4;
margin: 0;
}
@media print {
html, body {
padding:0px;
margin:0px;
width: 210mm;
height: 297mm;
}
#container {
float:left;
padding: 0px;
margin: 0px;
width: 80%;
}
}
html:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px;"></div>
jsfiddle: http://jsfiddle.net/w4ro5xb7/13/
test in full screen result for better effect: http://jsfiddle.net/w4ro5xb7/13/show/
Source: stackoverflow.com
Related Query
- Redraw/Resize highcharts when printing website
- Resize a chart before printing with Highcharts
- when printing page with highcharts using javascript this.print() width values in css in @media print seem to be ignored
- force Highcharts redraw animation when changing graph type
- Highcharts + Angularjs : Graph doesn't redraw when adding series from an external event
- Resize DIV to fit page width when printing
- dynamically set height of chart when printing Highcharts
- Highcharts checkboxes multiply when window resize event fires
- Highcharts not printing the line when there is empty data in the beginning
- Highcharts cloud issue with data source when duplicating chart
- Highcharts When printing the chart does not fit the page
- Highcharts - how to prevent xAxis redraw when using addSeries?
- HighCharts - When I download csv, can I switch data source to new one?
- Highcharts export : button is missing when website on IIS server
- Responsive Highcharts not sizing correctly until window resize
- Resize height with Highcharts
- Highcharts charts don't resize properly on window resize
- Highcharts => Getting the id of a point when clicking on a line chart
- Resize data points with highcharts
- Highcharts area fillOpacity do not work when changing the color
- How to make highcharts scrollable horizontally when having big range in x-axis
- Highcharts does not resize charts inside tabs
- Change title when drilldown in Highcharts
- Highcharts saying undefined is not a function when trying to add a new chart
- Add tooltip to legend in highcharts when hovering
- Javascript Highcharts v3.0.5 - How to hide Y Axis Title when using multiple Y Axis
- JavaScript error when using Highcharts
- Highcharts - only show tooltip when hovering directly on point
- Resize highcharts using react-grid-layout not working
- php: laravel slow view render time when rendering javascript for highcharts
More Query from same tag
- Highcharts margins before and after data display?
- Highcharts/Highstock Scrollbar Issue
- Synchronize x-axis zoom in multiple Highcharts-Vue stock charts
- How to draw a pie with logarithmic scale in HighCharts?
- How can I show daily grid lines in HighStock? Currently seems buggy
- Cannot Remove Credits (Link) in HighChart's PieChar
- Adding series dynamically in highcharts
- Highcharts clickhandler and accessing context
- Live data from MySQL with highchart
- Unexplected results with Highcharts Heatmap
- When using canvg to convert Highchart SVG into PNG, all text appears twice - how to solve?
- Highcharts: visualize graph arcs to 3D scatter chart
- Set chart options when printing and add a footer
- set Highstock xAxis range within options object
- How can I generate a real-time highchart from my database data?
- First tick on min and last tick on max
- How to customize a legend in highcharts as the image and while clicking on the leg end appears lines inside linechart
- I need to remove Y-axis labels on highcharts while keeping the data intact
- Highcharts 'area' type with normal stacking looks weird
- Highcharts Column w/ drilldown not working in Rails 4
- Webpack Highcharts Plugin IIFE
- Highcharts multiple y axis and dynamic update
- Stacked highchart in php
- How to display legend in Highcharts Waterfall Chart and make the sum column of waterfall appear in multiple colors?
- JSON Data for Highcharts in Symfony2 with ObHighchartsBundle
- Stacked highchart graph not working correctly for 0 values
- Highcharts zoom programatically
- Displaying count on bar and percentage on Y-axis of cloumn chart using Highcharts
- In high chart how to add event for label click
- Highcharts - stacked columns by category