CSS For Bar Graphs

Author: admin

Recently we’ve had to tackle some interesting visualizations which we coded in XHTML and CSS. The method we used, while fairly simple, was a big help to the engineer and created a very flexible and inexpensive solution. We thought we would share our solution and code in case anyone else ran against similar situations.

Basic CSS Bar Graph

This is a simple bar graph we developed for a tool we’re releasing shortly for our client. The concept is simple, utilize the percentage width abilities of CSS to accurately portray a percentage bar graph.

    24%

Complex CSS Bar Graph

This is a more complex visualization, yet still following the same basic idea. Here the graph is a ‘bad’ to ‘good’ indicator with a marker that travels the length of the color scheme. A lighter bar shade also helps indicate the marker position as it travels from left to right.

Love Life

25%

Education

55%

War Craft 3 Rank

75%

Vertical CSS Bar Graph

In this third example, we utilize the same principle vertically and reproduce it multiple times to create a more complex graph. This particular solution was a relief the to client and engineer as all they had to do was calculate percentages, and the look of the graph was much better than their stock graphing component.

22
7
3
8
2

We hope you enjoyed our examples and find new uses and variations for
the concept. Drop us a line if you have any other interesting
visualizations using XHTML and CSS and we’ll post them here.