Create a HTML/CSS Horizontal Bar Graph

After deciding the re-write my About section on my website, I looked around for some inspiration and realized many bar graphs around the net were just images created in a graphics program. I decided to create some HTML / CSS that could create a nice looking bar graph without a bandwidth intensive image.

1. Create and style the UL

I created a UL with the class “bargraph” and styled the graph as follows. I needed it to fit in my content without affecting my sidebar but you can change the width here to whatever you need:

.bargraph {
	list-style: none;
	padding-top: 20px;
	width:560px;
	}

 

<ul class="bargraph">
</ul>

 

2. Create and style the LI’s

I had 12 LI’s I needed for this graph so I kept the height somewhat small and chose to use white text to contrast against each bar. I also wanted spacing between each bar:

ul.bargraph li {
	height: 35px;
	color: white;
	text-align: left;
	font-style: italic;
	font-weight:bolder;
	font-size: 14px;
	line-height: 35px;
	padding: 0px 20px;
	margin-bottom: 5px;
	}

3. Style individual LI’s for color and size

Next I created a class name for each individual LI to control the sizing and color of the bar. Each bar can have its own color and percentage to control the size based on the width set in step 1.

	ul.bargraph li.reddeep {
	background: #ED1C24;
	width:100%;
	}

	ul.bargraph li.redpink {
	background: #EF465B;
	width:95%;
	}

	ul.bargraph li.pink {
	background: #E55A6B;
	width:93%;
	}

	ul.bargraph li.orangered {
	background: #E28159;
	width:85%;
	}

	ul.bargraph li.orange {
	background: #F99C1C;
	width:75%;
	}

	ul.bargraph li.yellow {
	background: #F4D41E;
	width:74%;
	}

	ul.bargraph li.green {
	background: #97B546;
	width:55%;
	}

	ul.bargraph li.greenbright {
	background: #36B669;
	width:40%;
	}

	ul.bargraph li.greenblue {
	background: #42BDA5;
	width:30%;
	}

	ul.bargraph li.blue {
	background: #00AEEF;
	width:20%;
	}

	ul.bargraph li.xaxis {
	background: url(../images/x-axis.jpg);
	height: 49px;
	}

 

<ul class="bargraph">
	<li class="reddeep">XHTML / CSS</li>
	<li class="redpink">WordPress</li>
	<li class="pink">Illustrator</li>
	<li class="orangered">Photoshop</li>
	<li class="orange">SEO</li>
	<li class="yellow">E-mail Marketing</li>
	<li class="green">PHP</li>
	<li class="greenbright">Javascript</li>
	<li class="greenblue">MySQL</li>
	<li class="blue">C++</li>
	<li class="xaxis"></li>
</ul>

4. X-Axis

I needed to use an image for the X-axis as I couldn’t create a CSS-only version of what I wanted:

	ul.bargraph li.xaxis {
	background: url(../images/x-axis.jpg);
	height: 49px;
	}

Thats it!

html-css-barchart

 

{o}
Otreva is a custom software product development company focusing on user experience, responsive web development, & mobile application development.

Interested in seeing what it costs to build an app?

Start Quote See Stats
224 Wyoming Ave. #100
Scranton, PA 18503

You've found the secret footer!

Tweets about @Otreva

Or check us out on:

Shopify Experts
Awwwards