CSS Bar Chart

A while back I had a project involving the creation of a lightweight chart library. In my research I tried out several approaches from JS with canvas to simple HTML & CSS.

In the end I created a commercial charts library JavaScript using JS & canvas, but I kept my intermediary attempts.

How to Make a Bar Chart Using Only HTML and CSS

The most interesting solution to creating a lightweight bar chart was to use a plain old HTML table element that contained the data for the bar chart and transform that using only CSS to turn it into a bar chart.

Basically I took the HTML code for the table that looked like this:

<table class="graph">
    <caption>Describe this Data</caption>
    <thead>
        <tr>
            <th scope="col">Item</th>
            <th scope="col">Percent</th>
        </tr>
    </thead><tbody class="horizontal">
        <tr style="height:85%">
            <th scope="row">Your Blog</th>
            <td><span>85%</span></td>
        </tr>
...

See the Pen Bar Chart HTML Only (table version alternative) by Ion Emil Negoita
(@inegoita) on CodePen.

In Conclusion

If you want to read more about 3 other methods for this, check out this detailed article on how to make a CSS bar chart using only HTML & CSS.