bryman79 bryman79 - 8 months ago 63
CSS Question

Body Styling Showing When Printing amcharts

I am working on a project which includes an chart with a watermark/overlay image (e.g., as discussed here: The chart is included in a div on a page with body styling (e.g., a background, a box-shadow, etc.). When printing the chart using the export item "Print," the resulting print includes the body styling (e.g., the background and box shadow). However, I would like it to print without these items (e.g., similar to the "JPG" export item in the "Download as..." sub-menu).

An example can be found here: To see the effect, print the chart (using the "Print" item of the export menu at the top-right of the chart) after adding the following CSS to the top of the existing CSS:

body {
background-color: #999;
box-shadow: 0px 0px 10px 3px #444;

On a Windows 10 machine, the effect is most noticeable in Firefox. In Chrome, the background is not visible but the box-shadow is visible if "margin: 0px;" is removed from the html/body CSS.

The background and box-shadow can be removed by altering the body styling using javascript (removing the background and box-shadow before printing and re-adding after), but this causes objectionable flashing. Is it possible to just exclude the body (or its styling) from the printing altogether?


To apply CSS to a document when it is in print mode, you can use the print media query and write every changes you want to happen (@media print { ... }

@media print { 
   body {
     background-color: transparent;
     box-shadow: 0 0 0 transparent;