Responsive CSS Column Chart With Mobile Fallback

Preview:

Description:

A simple, responsive CSS bar chart library that visualizes the tabular data (numeric values) into bars. The column chart will gracefully degrade to a plain HTML table on mobile devices.

How to use it:

Include the main CSS style.css in the head of the document.

<link rel="stylesheet" href="style.css">

Create an HTML table for the bar chart.

<table id="bar-graph">
  <caption>Web Performance Results</caption>
  <thead>
      <tr>
          <th></th>
          <th class="before">Before</th>
          <th class="after">After</th>
      </tr>
  </thead>
  <tbody>
      <tr id="section-1">
          <th scope="row">Initial Load Time</th>
          <td class="before bar"><p>4.7s</p></td>
          <td class="after bar"><p>1.1s</p></td>
      </tr>
      <tr id="section-2">
          <th scope="row">Visually Complete</th>
          <td class="before bar"><p>3.1s</p></td>
          <td class="after bar"><p>1.5s</p></td>
      </tr>
      <tr id="section-3">
          <th scope="row">Fully Loaded</th>
          <td class="before bar"><p>4.8s</p></td>
          <td class="after bar"><p>1.4s</p></td>
      </tr>
  </tbody>
</table>

Create the ticks for the bar chart.

<div id="ticks">
  <div class="tick"><p>5.0s</p></div>
  <div class="tick"><p>4.0s</p></div>
  <div class="tick"><p>3.0s</p></div>
  <div class="tick"><p>2.0s</p></div>
  <div class="tick"><p>1.0s</p></div>
  <div class="tick"><p>0.0s</p></div>
</div>