Resizing the chart for print

Martynas Majeris -

Usually browsers use different resolution when printing web pages. If you have charts that are wider than ~600-700 pixels, they will print as cropped.

To overcome this, use the following code to make the charts redraw using new dimensions before the page is printed:

if ('matchMedia' in window) {
    // Chrome, Firefox, and IE 10 support mediaMatch listeners
    window.matchMedia('print').addListener(function(media) {
} else {
    // IE and Firefox fire before/after events
    window.onbeforeprint = function () {

The above assumes that:

  • Your chart instance is placed into global "chart" variable
  • The chart is placed into a relative width container which will resize itself when printing

You may need to update the above code according to your needs.

Here's a working demo:

Have more questions? Submit a request


  • Avatar
    Michael Dop

    This seems to work great for Chrome, but for Firefox it does not re-size the chart and will cut off the chart data when printing.  I have tested on many different versions of firefox and still have the same result. 

    I took your jsfiddle and tried to print from Firefox and It only renders from USA -> France when it should show USA -> Poland on the column chart.

Powered by Zendesk