Pure CSS3 Html List Based Column/Bar Chart

Preview:

Description:

A pure CSS/CSS3 solution to render a customizable columb/bar graph from Html unordered lists.

Basic Usage:

Load the main.css for core chart styles.

<link href="styles/main.css" rel="stylesheet">

Create Y-axis labels.

<ul class="y_axis">
  <li>100%</li>
  <li>80%</li>
  <li>60%</li>
  <li>40%</li>
  <li>20%</li>
  <li>0%</li>
</ul>

Create X-axis labels.

<ul class="x_axis">
  <li>Steel</li>
  <li>Copper</li>
  <li>Metal</li>
  <li>Iron</li>
  <li>Wood</li>
</ul>

Insert date into the column/chart graph using Html lists as follow.

<div class="graph"> 
  <!-- grid -->
  <ul class="grid">
    <li><!-- 100 --></li>
    <li><!-- 80 --></li>
    <li><!-- 60 --></li>
    <li><!-- 40 --></li>
    <li><!-- 20 --></li>
    <li class="bottom"><!-- 0 --></li>
  </ul>
  
  <!-- bars --> 
  <!-- 250px = 100% -->
  <ul>
    <li class="bar nr_1 blue" style="height: 125px;">
      <div class="top"></div>
      <div class="bottom"></div>
      <span>50%</span></li>
    <li class="bar nr_2 blue" style="height: 225px;">
      <div class="top"></div>
      <div class="bottom"></div>
      <span>90%</span></li>
    <li class="bar nr_3 blue" style="height: 75px;">
      <div class="top"></div>
      <div class="bottom"></div>
      <span>30%</span></li>
    <li class="bar nr_4 blue" style="height: 100px;">
      <div class="top"></div>
      <div class="bottom"></div>
      <span>40%</span></li>
    <li class="bar nr_5 blue" style="height: 150px;">
      <div class="top"></div>
      <div class="bottom"></div>
      <span>60%</span></li>
  </ul>
</div>

Create graph label.

<div class="label">
  <span>Graph: </span>Gain (in percent)
</div>