Highcharts official support forum

We are currently experiencing an issue when a user attempts to print one of our pages which contains a high chart graph. Specifically, when viewing the 'Print Preview' (as well as the actual physically printed page) and the user has the scale option set to 'Shrink to Fit' the graphs within the page are not properly resizing themselves.

I've gone through and made sure the proper containers which hold the chart all have their widths set to '100%' and I cannot for the life of me fix this issue. Yes, I understand that they can use the print button on the chart itself to print it, but the user wants to print the chart AS WELL as the textual information within the page.

Please use the following demo page to see what I'm referring to:

http://www.highcharts.com/demo/area-basic

(Really any of the demos will work)

You'll notice that if you have the scale option set to 'Shrink to Fit' the chart does not properly resize itself to fit within the width of the page. I should also note that it appears the width of the chart on the print preview just carriers over from what its size was within the browser. So, in my case I have the browser maximized and also have my resolution at 1900x12000.

I just tried to print highcharts demo page to pdf (of course I chose 'fit to page' option) and got this: http://goo.gl/F57eA I suppose it looks properly.

The PDF you have linked shows my exact problem actually. Notice how on the right side the chart is getting 'clipped'? If you were to expand your browser window to have an even larger width the problem would be even more apparent.

Oh, sure I didn't notice this. We'll check this and someone come back to you soon.

The problem is that while the chart adjusts to resize events in the browser, those events are not triggered when creating a print. So if you manually resize your browser to 800px width it will affect the chart, but printing won't. While HTML elements reflow automatically to fit the print, the chart depends on JavaScript actions to do this.

The print engine just takes a snapshot of the page, which in this case has an SVG element at probaly a thousand pixels width.

I don't know how we can overcome this. Of course you can make sure your charts are no wider than 600 or 800 pixels, but then again that's too small for the webpage.

Another option would be that you create a "printer friendly" page, but that's not a very elegant solution either.

Did this issue get fixed? Browsers do send resize events before and after running print; they also have onbeforeprint and onafterprint events (or media query "print" events).

Unfortunately not. There are various of techniques, but still I'm not sure if it's possible to do across the all supported browsers.
- onbeforeprint/onafterprint is supported but only by IE and Firefox >6 (check browser compatibility here: https://developer.mozilla.org/en/DOM/wi ... eforeprint)
- matchMedia is supported in webkit (Chrome>8, Safari>=5, iOS 5, Android 3/4)
- the problem with window.resize event is that you don't know if user prints page or just browser window was resized. However, during the tests I didn't recive the size of a printed window (window, document and body size didn't change at all).

Could you provide a demo that reports new size for printed page?