Click the image above to see the real-life example of a pure CSS-based bar graph chart. I have also made the CSS code available if you want to adapt it to your own uses.
Wednesday, May 17, 2006
Pure CSS Bar Chart
Earlier today I was trying to find a way to create a bar graph that can be dynamically sized and resized based on data that is passed from someplace, like an application.
I didn't want to have to mess with the creation of a GIF or PNG or some other image, and I wanted the solution to be pretty lightweight. So, I turned to CSS, and after a little tinkering I came up with a pretty nifty, clean and super light way of creating a dynamically scalable bar chart. It uses no images - just text and CSS.
Click the image above to see the real-life example of a pure CSS-based bar graph chart. I have also made the CSS code available if you want to adapt it to your own uses.
Click the image above to see the real-life example of a pure CSS-based bar graph chart. I have also made the CSS code available if you want to adapt it to your own uses.