Creating a bar graph with CSS and HTML

I recently had to create a bar graph to highlight for a simple project that I was working on. 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: 80%;
}

#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:

<div id="chartContainer">
<div id="chartHeader">
  Mifty's Top Movie Trilogies of All Time
</div>

<div id="chart">

  <ul>

    <li><div class="bar" style="width:95%">&nbsp;</div><div class="percentage">95%</div> <div class="barTitle">The Matrix</div></li>

    <li><div class="bar" style="width:75%">&nbsp;</div><div class="percentage">75%</div> <div class="barTitle">Indiana Jones</div></li>

    <li><div class="bar" style="width:88%">&nbsp;</div><div class="percentage">88%</div> <div class="barTitle">Old Star Wars (Episodes IV,V and VI) </div></li>
	
	<li><div class="bar" style="width:25%">&nbsp;</div><div class="percentage">25%</div> <div class="barTitle">New Star Wars (Episodes I,II and III)</div></li>

    <li><div class="bar" style="width:52%">&nbsp;</div><div class="percentage">52%</div> <div class="barTitle">Back To The Future</div></li>
	
	<li><div class="bar" style="width:72%">&nbsp;</div><div class="percentage">72%</div> <div class="barTitle">Rocky</div></li>
	
	<li><div class="bar" style="width:70%">&nbsp;</div><div class="percentage">70%</div> <div class="barTitle">Lord of The Rings</div></li>
	
	<li><div class="bar" style="width:20%">&nbsp;</div><div class="percentage">20%</div> <div class="barTitle">Fast and Furious </div></li>
	
	<li><div class="bar" style="width:60%">&nbsp;</div><div class="percentage">60%</div> <div class="barTitle">The Transporter</div></li>
	
	<li><div class="bar" style="width:68%">&nbsp;</div><div class="percentage">68%</div> <div class="barTitle">Alien</div></li>
	
	<li><div class="bar" style="width:80%">&nbsp;</div><div class="percentage">80%</div> <div class="barTitle">Die Hard</div></li>
	<li><div class="bar" style="width:1%">&nbsp;</div><div class="percentage">1%</div> <div class="barTitle">Final Destination</div></li>
	<li><div class="bar" style="width:35%">&nbsp;</div><div class="percentage">35%</div> <div class="barTitle">Rambo</div></li>

  </ul>

</div>
</div>

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.