Creating Responsive Charts with Pure CSS – cssplot

cssplot is a CSS plotting library that makes it easy to draw responsive bar charts & scatter plots with pure Html5 & CSS.

Basic usage:

Load the cssplot.full.css in the head section of your document.

<link href="cssplot.full.css" rel="stylesheet">

Create a basic bar chart with Html unordered list. Use Html5 data-cp-size attribute to specify the value/height for each column. You can also use class="chart-column" style="height: 50% instead of data-cp-size="50".

<div class="bar-chart">
  <ul class="container">
    <li data-cp-size="99">99%</li>
    <li data-cp-size="50">50%</li>
    <li data-cp-size="30">30%</li>
    <li data-cp-size="90">90%</li>
    <li data-cp-size="10">10%</li>
    <li data-cp-size="70">70%</li>
    <li data-cp-size="30">30%</li>
    <li data-cp-size="90">90%</li>
  </ul>
</div>