Flexbox Bar Graphs

Pure CSS bar graphs with a graceful mobile fallback.

Open source and 100% customizable.

Focused on minimalism.

Why Use This?

If you're looking to implement a fairly simple and limited bar graph on a site or web page - this project is for you. More complex data visualization tools are available for those seeking more customization.

Best Use Cases:

Personal blogs / articles
Quick data visualization experiments
HTML based presentations, talks etc.

The Demos

Web Performance Results (in Seconds)
Test Performed	Before	After	Difference
Initial Load Time	4.7	2.7	2
Visually Complete	3.8	1.9	1.9
Fully Loaded	4.9	1.6	3.3

Web Performance Results
Test Performed	Before	After	Difference
Initial Load Time	4.7	2.7	2
Visually Complete	3.8	1.9	1.9
Fully Loaded	4.9	1.6	3.3
SEO	4.9	2.6	2.3

Usage & Caveats

Basic HTML

Usage is very simple - just set your data together as you normally would in an HTML table. Two items to focus on:

Make sure you set the proper data-id on the table element
Each data point is set in the data-set variable. This gives you control over each point (can specify it's total, etc.)

<table data-id="flexbox-bar-graph"> <caption>Web Performance Results</caption> <thead> <tr> <th>Test Performed</th> <th>Before</th> <th>After</th> <th>Difference</th> </tr> </thead> <tbody> <tr> <th>Initial Load Time</th> <td> <span style="--data-set:4.7/5;"></span> <p>4.7</p> </td> <td> <span style="--data-set:2.7/5;"></span> <p>2.7</p> </td> <td> <span style="--data-set:2/5;"></span> <p>2</p> </td> </tr> </tbody> </table>

Changing bar graph colors

To change individual bar graph colors, simply edit the corresponding CSS variables found at the top of the CSS file (or replace these variables in your own separate stylesheet)

--bar-color-1: #357EC7;
--bar-color-2: #E42217;
--bar-color-3: #4CC417;
--bar-color-4: #7D0541;
--bar-color-5: #FFD801;

Common Standards

There are a set of common standards that should be followed and assumptions made by the project itself that you need to be aware of when creating the table base for your graphs:

The first th in your thead will only be displayed on mobile (this is the main heading for the tbody table headings - so it is for reference only)
You have th tags for each of your tbody tr items which label their sibling elements

That's it!

Important Caveats

Individual graph items have a base "limit" of 5 data points. If you wish to include more you will have to add a new instances similar to the others.