Google Chrome shows extra borders when printing

[Álvaro González]

I've just switched to the JavaScript renderer because managed printing was taking several minutes to prepare charts on Google Chrome. To my surprise, graphs are printed exactly like in the screen in all browsers except Google Chrome. Here's a screenshot of a "MSCombiDY2D.swf" chart—on screen look on top, print preview on bottom:

 

 

 

According to Chrome console that element is a <rect> tag and I haven't set a single CSS rule for such tags.

 

Do you have any idea of where those black boxes come from?

[Álvaro González]

Alright, I found where it comes from. This is what the bands look like:

<rect x="66" y="84.20000000000002" width="432" height="52.19999999999999" r="0" rx="0" ry="0"
fill="#eeeeee" stroke="#000" fill-opacity="0" stroke-width="0.000001" style=""></rect>

For whatever reason, Google Chrome renders stroke-width="0.000001" as a thick line when printing. This workaround seems to do the trick:

@media print{
    rect[stroke-width="0.000001"]{
        stroke-width: 0;
    }
}

[Guest Sashibhusan]

Hi,

 

Glad to know that you have managed of your own to resolve the issue.

[vibin.joseph]

Thanks Alvaro. I had this issue with StackedColumn2D graph. Adding the below lines to my css resolved the issue.

 

/************ START: chrome fixes ******************************/

rect[stroke-width=0.000001]{

    stroke-width: 0;

}

/************ END: chrome fixes ******************************/

[Guest Sumedh]