jsullivan/CSS3-Horizontal-combo-chart


A fluid combo chart built with css


A simple horizontal combo chart, serving the same purpose as a pie chart, except it's fluid, rectangular, and isn't as gimmicky as a pie chart. To use, paste this into your html:

<div class="horizontal-combo-container">
	<div class="horizontal-combo-mortice">
		<div class="combo-fill" style="width: 35%">
			<div class="combo-label">
				Campaigns
			</div>
			<div class="fill-amount">
				35%
			</div>
		</div>
	</div>
</div>

Then, link to the included stylesheet in the head of your html. For each new summary of data, create a new combo-fill element containing its own combo-label and fill-amount.

See the example.html for colors and styles.

Project Statistics

Sourcerank 3
Repository Size 124 KB
Stars 13
Forks 1
Watchers 1
Open issues 0
Dependencies 0
Contributors 1
Tags 0
Created
Last updated
Last pushed

Top Contributors See all

Josh Sullivan

Something wrong with this page? Make a suggestion

Last synced: 2017-04-15 15:37:42 UTC

Login to resync this repository