Pure HTML/CSS Bar Chart System – Chart.css

Preview:

Description:

Chart.css is an easy-to-use chart system that helps you display percentage value as horizontal or vertical bar charts using plain HTML and CSS.

How to use it:

All your need is to include the chart.css on the webpage and we’re ready to go.

<link rel="stylesheet" href="dist/chart.css">

Create a basic bar chart where the percentage values are specified using CSS classes.

<div class="charts">
  <div class="charts__chart chart--p50"></div>
  <div class="charts__chart chart--p60"></div>
  <div class="charts__chart chart--p70"></div>
  <div class="charts__chart chart--p80"></div>
  <div class="charts__chart chart--p90"></div>
</div>

You can also use data attribute to specify the percentage values you want to represent.

<div class="charts">
  <div class="charts__chart" data-percent="50%"></div>
  <div class="charts__chart" data-percent="60%"></div>
  <div class="charts__chart" data-percent="70%"></div>
  <div class="charts__chart" data-percent="80%"></div>
  <div class="charts__chart" data-percent="90%"></div>
</div>

Adding the CSS class ‘charts–vertical’ to the top element to create a vertical bar (column) chart.

<div class="charts charts--vertical">
  <div class="charts__chart" data-percent="50%"></div>
  <div class="charts__chart" data-percent="60%"></div>
  <div class="charts__chart" data-percent="70%"></div>
  <div class="charts__chart" data-percent="80%"></div>
  <div class="charts__chart" data-percent="90%"></div>
</div>

Create a stacked bar chart using nested DIV elements.

<div class="charts charts--grouped">
  <div class="charts__chart chart--p100 chart--sm" data-percent>
    <div class="charts__chart chart--p80  chart--blue" data-percent>
      <div class="charts__chart chart--p60  chart--green" data-percent></div>
    </div>
  </div>
  
  <div class="charts__chart chart--p70" data-percent>
    <div class="charts__chart chart--p80  chart--grey" data-percent>
      <div class="charts__chart chart--p60  chart--yellow" data-percent></div>
    </div>
  </div>
  <div class="charts__chart chart--p50 chart--lg" data-percent>
    <div class="charts__chart chart--p80  chart--red" data-percent>
      <div class="charts__chart chart--p60  chart--inverse" data-percent></div>
    </div>
  </div>
</div>

Reference.

• .charts: Container of normal charts (horizonal). .charts assumes the width of outside element (100%). You can change the width of .charts container.
• .charts–grouped: Enable chart grouping.  Don’t work with .charts–vertical
• .charts–vertical: Transform the chart to vertical. .charts–vertical has a predefined height. You can change the height of .charts–vertical container
• .charts__chart: Chart element that must stay inside the container element
• .chart–xs .chart–sm .chart–lg .chart–xl:  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: The width classes replaces changing by style=””. With these classes, adding the attribute data-percent, the percentage appears correctly
• .chart–hover: Add hover in chart element. Works with classes colors
• [data-percent]: 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”>: 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>: Element for display title in chart. Should come before the element .charts__chart Don’t work with .charts–vertical