Skip to content

Instantly share code, notes, and snippets.

@Mortimerp9
Created October 18, 2012 01:24
Show Gist options
  • Save Mortimerp9/3909351 to your computer and use it in GitHub Desktop.
Save Mortimerp9/3909351 to your computer and use it in GitHub Desktop.
CSS bar graph with Positive and Negative values
/**
* CSS bar graph with Positive and Negative values
*/
.graph {
width: 100px;
border: 1px solid #aeaeae;
background-color: #eaeaea;
}
/* Start of "Micro clearfix" */
.cf { zoom: 1; }
.cf:before,
.cf:after { content: ""; display: table; }
.cf:after { clear: both; }
/* End of "Micro clearfix" */
.ext {
width: 50px;
padding: 2px 0;
}
.ext.neg {
border-right: 1px solid black;
}
.ext.pos {
margin-left: 50px;
border-left: 1px solid black;
}
.ext.neg .bar {
float: right;
margin-bottom: 5px;
background-color: red;
}
.ext.pos .bar {
background-color: green;
}
.bar {
height: 5px;
}
<!-- content to be placed inside <body>…</body> -->
<div class="graph cf">
<div class="ext pos"><div style="width: 50%;" class="bar"></div></div>
<div class="ext pos"><div style="width: 25%;" class="bar"></div></div>
<div class="ext pos"><div style="width: 10%;" class="bar"></div></div>
<div class="ext neg"><div style="width: 90%;" class="bar"></div></div>
<div class="ext neg"><div style="width: 40%;" class="bar"></div></div>
</div>
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
@Mortimerp9
Copy link
Author

This is a simple code for horizontal bars with an axis (0) in the middle and the bars either extending to the negative or the positive (left or right of the axis). Similar to what Google Analytics shows.

see it at http://dabblet.com/gist/3909351

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment