How to make printable bar graph with HTML5 and CSS3? -

i created web page uses html5 , css3 draw bar graph. first time doing this, , followed instructions given here: http://www.htmlgoodies.com/html5/tutorials/bar-graph-with-css3-and-progressive-enhancement.html#fbid=gg6mmpdnqdn

the long , short of create div tag each bar , use css set size , color of each bar. specifically, use background-color css attribute.

this works great until user prints page, , expect page printed many times.

the problem web browsers typically omit background images , colors printed version of page. results in bars not printing @ all!

chrome allows user check box indicating background images , colors should print, isn't practical me say, "to print this, use chrome , sure check box yada yada yada."

one stop-gap measure i've deployed use css specify when document printed, border should drawn around bars, border; doesn't fill bar @ all.

how can make bar graph html5 , css3 print correctly under browser configurations.

add this style chrome:

:root {-webkit-print-color-adjust: exact;} 

that reduces user instructions simply, "to print this, use chrome."

otherwise, may need resort svg @miltoxbeyond suggested.