chart.css

A Simple CSS Chart System

Download Star Fork

examples reference github

How To Use

1. Include chart.css file

You can download the chart.css or use the CDN powered by RawGit. 


<!-- Downloaded chart.css -->
<link rel="stylesheet" href="chart.css">

<!-- RawGit CDN chart.css -->
<link rel="stylesheet" href="https://cdn.rawgit.com/theus/chart.css/v1.0.0/dist/chart.css" />

You can use the file served by RawGit CDN or download and put chart.css file. Note that only needs one way.

2. Set up HTML


<div class="charts">
  <div class="charts__chart"></div>
  ...
</div>

3. Don't has 3rd step :P

Set Width In Style

For show the percentage in charts, add the value in attribute data-percent 


<div class="charts">
  <div class="charts__chart" data-percent="100%"></div><!-- /.charts__chart -->
  <div class="charts__chart" data-percent="60%" style="width: 60%"></div><!-- /.charts__chart -->
  <div class="charts__chart" style="width: 40%"></div><!-- /.charts__chart -->
  <div class="charts__chart" style="width: 10%"></div><!-- /.charts__chart -->
</div><!-- /.charts -->

Set Width With Classes

Setting up the width of chart with the classes doesn't it necessary put the value in data-percent attribute. Just append the attribute without value

Classes range from chart--p0 to chart--p100 


<div class="charts">
  <div class="charts__chart chart--p100" data-percent></div><!-- /.charts__chart -->
  <div class="charts__chart chart--p70" data-percent></div><!-- /.charts__chart -->
  <div class="charts__chart chart--p40"></div><!-- /.charts__chart -->
  <div class="charts__chart chart--p20"></div><!-- /.charts__chart -->
</div><!-- /.charts -->

Chart Sizing

Classes available for sizing: chart--xs, chart--sm, chart--lg and chart--xl 


<div class="charts">
  <div class="charts__chart chart--p100 chart--xs" data-percent></div><!-- /.charts__chart -->
  <div class="charts__chart chart--p80 chart--sm" data-percent></div><!-- /.charts__chart -->
  <div class="charts__chart chart--p60" data-percent></div><!-- /.charts__chart -->
  <div class="charts__chart chart--p40 chart--lg" data-percent></div><!-- /.charts__chart -->
  <div class="charts__chart chart--p20 chart--xl" data-percent></div><!-- /.charts__chart -->
</div><!-- /.charts -->

Chart Colors

Colors available: chart--default, chart--blue, chart--green, chart--red, chart--yellow and chart--grey

For titles, just put an <span> tag before the charts__chart

chart--default
chart--blue
chart--green
chart--red
chart--yellow
chart--grey 

<div class="charts">
  <span>chart--default</span>
  <div class="charts__chart chart--p100 chart--default" data-percent></div><!-- /.charts__chart -->
  <span>chart--blue</span>
  <div class="charts__chart chart--p80 chart--blue" data-percent></div><!-- /.charts__chart -->
  <span>chart--green</span>
  <div class="charts__chart chart--p60 chart--green" data-percent></div><!-- /.charts__chart -->
  <span>chart--red</span>
  <div class="charts__chart chart--p40 chart--red" data-percent></div><!-- /.charts__chart -->
  <span>chart--yellow</span>
  <div class="charts__chart chart--p20 chart--yellow" data-percent></div><!-- /.charts__chart -->
  <span>chart--grey</span>
  <div class="charts__chart chart--p5 chart--grey" data-percent></div><!-- /.charts__chart -->
</div><!-- /.charts -->

Chart With Hover

Append the chart--hover in chart 


<div class="charts">
  <div class="charts__chart chart--p100                chart--hover"></div><!-- /.charts__chart -->
  <div class="charts__chart chart--p80  chart--blue    chart--hover"></div><!-- /.charts__chart -->
  <div class="charts__chart chart--p60  chart--green   chart--hover"></div><!-- /.charts__chart -->
  <div class="charts__chart chart--p40  chart--red     chart--hover"></div><!-- /.charts__chart -->
  <div class="charts__chart chart--p20  chart--yellow  chart--hover"></div><!-- /.charts__chart -->
  <div class="charts__chart chart--p5   chart--grey    chart--hover"></div><!-- /.charts__chart -->
</div><!-- /.charts -->

Chart Grouped

Append the class charts--grouped in charts container. After this, hierarchically the charts will be added inside the previous chart, like the example

The chart in top level must be bigger than the inferior level, since that the top level chart is underneath of inferior level chart in page.
The chart in inferior level admits the superior level as your container, therefore never will exceed it 


<div class="charts">
  <div class="charts__chart chart--p100 chart--sm">
    <div class="charts__chart chart--p80  chart--blue">
      <div class="charts__chart chart--p60  chart--green"></div><!-- /.charts__chart -->
    </div><!-- /.charts__chart -->
  </div><!-- /.charts__chart -->
  
  <div class="charts__chart chart--p70">
    <div class="charts__chart chart--p80  chart--grey">
      <div class="charts__chart chart--p60  chart--yellow"></div><!-- /.charts__chart -->
    </div><!-- /.charts__chart -->
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p50 chart--lg">
    <div class="charts__chart chart--p80  chart--red">
      <div class="charts__chart chart--p60  chart--inverse"></div><!-- /.charts__chart -->
    </div><!-- /.charts__chart -->
  </div><!-- /.charts__chart -->

</div><!-- /.charts -->

beta Chart Vertical

Append the class charts--vertical in charts container. The operation is equal to charts normal. The sizing classes, colors classes, chart--hover work normally. The height may be changed by style too, changing it in style.

For now, charts--vertical don't support charts--grouped.

In charts--vertical the method to show the percentage it's different from normal charts. In normal charts, append data-percent as attribute. Here, inside of charts__chart inserts <span class="charts__percent"></span> like in example.
If <span class="charts__percent"></span> is empty, it assumes the value of class of percentage (chart--p0-100). But, this span may used like a title.

Title 

<div class="charts charts--vertical">

  <div class="charts__chart">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p80">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p60">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p100                chart--hover">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p80  chart--blue    chart--hover">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p60  chart--green   chart--hover">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p40  chart--red     chart--hover">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p20  chart--yellow  chart--hover">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p5   chart--grey    chart--hover">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->


  <div class="charts__chart chart--p100 chart--xs">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p80 chart--sm">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p60">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p40 chart--lg">
    <span class="charts__percent"></span>
  </div><!-- /.charts__chart -->

  <div class="charts__chart chart--p20 chart--xl">
    <span class="charts__percent">Title</span>
  </div><!-- /.charts__chart -->


</div><!-- /.charts -->

Reference

Class Type Default Description
.charts Container core - Container of normal charts (horizonal). .charts assumes the width of outside element (100%). You can change the width of .charts container.
.charts--grouped Modifier container No Enable chart grouping. Don't work with .charts--vertical
.charts--vertical Modifier container No Transform the chart to vertical. .charts--vertical has a predefined height. You can change the height of .charts--vertical container
.charts__chart Chart element core - Chart element that must stay inside the container element
.chart--xs .chart--sm .chart--lg .chart--xl Size modifier chart - List of sizes available
.chart--default .chart--blue .chart--green .chart--red .chart--yellow .chart--grey Color modifier chart .chart--default List of colors available
.chart--p0 - .chart--p100 Width modifier chart 100% The width classes replaces changing by style="". With these classes, adding the attribute data-percent, the percentage appears correctly
.chart--hover Hover modifier chart No Add hover in chart element. Works with classes colors
[data-percent] Percentage attribute chart No Attribute for enabling percentage in chart. It gets the value of the class chart--p0-100, need not be declared Don't work with .charts--vertical and .charts--grouped
<span class="charts__percent"> Title/Percentage element chart No Element for display percentage in .charts--vertical. If <span class="charts__percent"></span> is empty, it assumes the value of class of percentage (chart--p0-100). But, this span may used like a title. Works only with .charts--vertical
<span> Title element chart No Element for display title in chart. Should come before the element .charts__chart Don't work with .charts--vertical