Creating Responsive Charts with Pure CSS – cssplot

Author: asciimoo
Views Total: 7,906 views
Official Page: Go to website
Last Update: October 24, 2014
License: MIT


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>

See also  Creating Basic Parallax Effects using CSS3 Transforms

Leave a Reply

Your email address will not be published. Required fields are marked *