A simple and hacky column chart in HTML & CSS

This is a draft from two years ago, I just thought I would publish it in case it is useful for anyone. I don’t remember anything about it, not even what it was for. Feel free to use it in any way you like.

It looks like this:

htmlcsscolumnchart

#histogramcontainer {
height: 20%;
width: 10%;
background-color:#deebf7;
position:relative; /* To make the children's percentages relative */
 
/* setting position="absolute" bottom="0" on the histodivs makes them all overlay each other horizontally */
 
/* http://stackoverflow.com/questions/2147303/how-can-i-send-an-inner-div-to-the-bottom-of-its-parent-div */
-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg); -ms-transform:rotate(180deg);
 
}
 
div.histogrambar {
float:left;
width:19%;
background-color:#3182bd;
}
 
div#histogrambar_a {height: 20%; margin-left: 1%;}
div#histogrambar_b {height: 10%; margin-left: 1%;}
div#histogrambar_c {height: 40%; margin-left: 1%;}
div#histogrambar_d {height: 100%; margin-left: 1%;}
div#histogrambar_e {height: 30%;}
<div id="histogramcontainer">
<div class="histogrambar" id="histogrambar_e"></div>
<div class="histogrambar" id="histogrambar_d"></div>
<div class="histogrambar" id="histogrambar_c"></div>
<div class="histogrambar" id="histogrambar_b"></div>
<div class="histogrambar" id="histogrambar_a"></div>
</div>

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.