Web Design Blog – CSS Tutorials, jQuery Tutorials, SEO Tips, Learning Advice, Personal News, and More

Creating a bar graph with CSS and HTML

I recently had to create a bar graph to highlight my skills in the about me section of this site. I took the lazy approach and started out looking for a good tutorial on creating a bar graph using only CSS and HTML. After failing to find any good bar graphs, I decided to write one myself using a combination of various techniques that I came across on the web. The result is the following bar graph:

The CSS for the above graph is as follows:

#chartContainer
{
	width: 400px;
}

#chartHeader
{
  font-size: 12pt;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  padding-bottom: 5px;  
}

#chart
{
  font-size: 10pt;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  padding-bottom: 5px;  
}

#chart ul
{
  margin: 0;
  padding: 0
  list-style-type: none;
}

#chart ul li
{
  margin-bottom: .5em;
  background: #5A5959;
  display: block;
  position: relative;
  height: 20px;
  border-style:solid;
	border-width:2px;
	border-color:#264148;
}

#chart ul li:hover
{
	background: #6B6A6A;
}

#chart ul li div.bar
{
  background: #45717B;
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  border-right:solid #264148;
  border-right-width: 1px;
}

  

#chart ul li div.percentage
{
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 0;
  left: 2px;
  height: 20px;
  padding-top: 2px;
}

  

#chart ul li div.skill
{
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 0;
  left:   38px;
  height: 20px;
  padding-top: 2px;
}

We basically create a chart container element that consists of an unorderd list. Each element of the list corresponds to a bar in the bar graph and we can use the CSS width property later to set the width of the bar. Various colors and containers are then set to give the bar graph its look and feel. The chart element must be placed inside a chartContainer element. You also have the option to determine if you want to include a header for the chart by using the chartHeader element. The header In this tutorial, I set the colors to match the layout of my website, but nothing stops you from changing the colors to whatever you like.

The HTML part is then quite simple and looks like so:

  GorillaNinja's Top Movie Trilogies of All Time




  


    
 
95%
 
The Matrix

    
 
75%
 
Indiana Jones

    
 
88%
 
Old Star Wars (Episodes IV,V and VI) 
	
	
 
25%
 
New Star Wars (Episodes I,II and III)

    
 
52%
 
Back To The Future
	
	
 
72%
 
Rocky
	
	
 
70%
 
Lord of The Rings
	
	
 
20%
 
Fast and Furious 
	
	
 
60%
 
The Transporter
	
	
 
68%
 
Alien
	
	
 
80%
 
Die Hard
	
 
1%
 
Final Destination
	
 
35%
 
Rambo

  

All we need to do is use the chart CSS element that we created to envelop our bar graph. Each bar in the graph is surrounded by a div tag and and its class is set to bar. We then use the width property to determine the length of the bar:

That’s basically it. You now have a CSS and HTML bar graph that is easy to use and highly customizable. Click here to download a zip file of the tutorial or click here to see a stand-alone version of the CSS and HTML bar graph.