Creating Responsive Charts with Pure CSS – cssplot

Category: Chart & Graph , CSS & CSS3 , Recommended | October 24, 2014
Author: asciimoo
Views Total: 5,780
Official Page: Go to website
Last Update: October 24, 2014
License: MIT

Preview:

Creating Responsive Charts with Pure CSS – cssplot

Description:

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>

You Might Be Interested In:


2 thoughts on “Creating Responsive Charts with Pure CSS – cssplot

  1. Paul Lawrie

    For the horizontal chart I had to change container to plot-container for it to work 🙂

    Reply

Leave a Reply