Home/ Questions/Q 6380851
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T02:19:16+00:00

Related: How to get a background image to print using css? I’m aware that

  • 0

Related:
How to get a background image to print using css?

I’m aware that browsers don’t render CSS backgrounds when printing.

I’m making a simple bar graph using divs i.e. 

<div style="width: 10px; height: 43%; background-color: blue;" title="Series A - 43%">A</div>
<div style="width: 10px; height: 55%; background-color: green;" title="Series B - 55%">B</div>

Is there any way to ‘color in’ the graph such that it prints correctly?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you’re on to something using the border. You should be able to continue using a percentage width / height. Try using some negative margins to position the bar label.

    <hmtl>
<head>
<style type="text/css"> 
    .graph { border:solid 1px #aaa; background-color:#eee; height:200px; width:260px; }
    .graph h1 { color:#000; font-size:1.4em; }
    .graph p { color:#fff; }
    .graph div {  margin-top:8px; } 
    .graph div div { margin-top:-10px; }    

</style>
</head>
<body>

    <div class="graph">
        <h1>Graph 1.1</h1>
        <p>Graph description</p>

        <div style="height:0px; width:43%; border-top:solid 7px blue; border-bottom:solid 7px blue;"  title="Series A - 43%"><div>A</div></div>
        <div style="height:0px; width:55%; border-top:solid 7px lime; border-bottom:solid 7px lime;" title="Series B - 55%"><div>B</div></div>
        <div style="height:0px; width:10%; border-top:solid 7px pink; border-bottom:solid 7px pink;" title="Series c - 10%"><div>C</div></div>
        <div style="height:0px; width:90%; border-top:solid 7px orange; border-bottom:solid 7px orange;" title="Series D - 90%"><div>D</div></div>
    </div>
</body>
</html>
    • 0