Printable Bar Graph in HTML

I needed to make a graph on a web page and I didn’t want to use images because then they would have to be accessible to the end user. I was scouring the Internet trying to find a solution to this problem.

Turns out the <div> and <span> tags are great for this. The problem is you can’t print them unless you have Print Background Images enabled in your browser. I found a work around for this: use the same <div> or <span> tags to make your rectangle but instead of setting the dimensions of the box and the fill color just set the height and the border width to the size you need.

Here is how I make horizontal bars that will print in any browser:

<SPAN style=’border-left: black 100px solid; display: inline-block; height: 10px></SPAN>

That line will make a black rectangle that is 100 pixels long and 10 pixels high. Just change the border width and color for each additional bar.

This entry was posted in Random, Site Development, Tips and tagged , , , , , , , , . Bookmark the permalink.

2 Responses to Printable Bar Graph in HTML

  1. Mukharjee says:

    Hi Calvin,
    Your Idea in generating printable bar chart is great. It helped me lot as I am looking for such code to draw printable bar chart for student progress card.

    Thank you very much for sharing this on web.
    Mukharjee Pinapaka

  2. Calvin says:

    Glad to hear you found a use for this piece of code!

Leave a Reply

Your email address will not be published. Required fields are marked *