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.