Resizing chart for print

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:

(function() {
  var beforePrint = function() {
    for(var i = 0; i < AmCharts.charts.length; i++) {
      var chart = AmCharts.charts[i];
      chart.div.style.width = "700px";
      chart.validateNow();
    }
  };
  var afterPrint = function() {
    for(var i = 0; i < AmCharts.charts.length; i++) {
      var chart = AmCharts.charts[i];
      chart.div.style.width = "100%";
      chart.validateNow();
    }
  };

  if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
      if (mql.matches) {
        beforePrint();
      } else {
        afterPrint();
      }
    });
  }

  window.onbeforeprint = beforePrint;
  window.onafterprint = afterPrint;
}());

You may also need to add a CSS @media query to resize chart containers for print:

@media print {
  /* for printing out - assume 8.5x11inches  */

  #chartdiv {
    max-height: 612px;
    max-width: 700px;
  }
}

The above will make sure that all amCharts charts on page will be resized on print:

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

[amcharts2_row class=“info-block”]

Please note, that if you have a CSS transition applied to your chart container (i.e. chartdiv), the above trick will not work for FireFox.

You’ll need to make sure that all CSS transitions are removed in the @media print context.

[/amcharts2_row]

Here’s a working demo.