CSS Weekly Bar Charts

We were tasked with the challenge of building a site that could get people in the mind of improving their health. With the subject of wellness in mind, we would build a site that would enable participants to bring together teams of people who could encourage each other to focus on improving each other’s lives through specific challenges. One challenge would be a step challenge.

In the development of the application, I came up with a layout that incorporated views of an individual’s progress over a certain number of days and weeks. When I was dreaming up how the data should be visualized, I looked up examples of CSS bar charts, and Eric Meyer’s CSS Vertical Bar Charts showed up in the search results. Well, that gave me some confidence to mockup a solution that could rely primarily on some already documented methods to represent bar graphs with CSS.

The next challenge was to actually take what Eric Meyer had created and develop a reusable snippet of HTML with enough hooks to be able to create a bubble tooltip that displayed the data associated with each data point in the bar chart.

CSS Weekly Bar Chart Demo

I was pleasantly surprised by the result. Now, this has been tested only in Mac Safari and Firefox. There are problems to be expected in Internet Explorer, particular IE6, since the demo relies on support for the CSS content property and the :before pseudo class.

View the demo