posted on:February 2, 2008

Pure Css Data Chart


Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let’s say simple data chart? How about giving it a try with nothing but good ol’ css?

Take a look at the Demo
| Download Css Chart


In this example I am not using JavaScript or any backend application. All I rely on is well formed markup and css.
So, the goal is to present data chart. We could say that a chart is a two dimensional object. So, the best structural and
semantical choice is definition list. Why? Well, for starter, it is a list of items. Although the list is linear, we
could interpret definition titles (dt elements) as items on x axis and definition descriptions (dd elements) as values on y axis.
If that doesn’t make sense because of my poor explanation skills 🙂 what I’ll do here is turn this:

unstyled definition list

into this

css data chart

with css alone.

The markup

In my example I have used a period of last 12 days and presented my working energy level in percentages,
100% being the best I’ve felt about working ever. As you can see, on 6th day it went up a bit because I
received a solid paycheck and that boosted me up 🙂
Anyway, to structure this kind of data I chose definition list. Definition title contains the day title

<dt>Day 1</dt>

And definition description contains the value


Inside the definition description element I will add a span and nested em element. Not for structural purposes,
but to give myself enough elements to work with. I will also assign classes that I can use later on.
So definition description looks like this now:

<dd><span class="type2 p80"><em>80</em></span></dd> 

Styling it

Definition list contains acts as a chart container, so I’ll assign background image to it and set the width and
height to match the dimension of the chart. Also, I’ll remove default margins and paddings

dl#csschart, dl#csschart dt, dl#csschart dd{
	background:url(bg_chart.gif) no-repeat 0 0;

Definition titles have no visual purpose here, so I’ll hide them:

dl#csschart dt{

Moving on to the real thing. Definition descriptions contain 2 child elements: span and em. That gives me 3 elements to work with.
I will put <dd> in the correct position by adding margins, setting their height so it matches 100% value and width that matches
a column of the background chart. The <dd> are floated left so they will line up.
Each <dd> has position relative so the child elements can relate to them.

dl#csschart dd{
dl#csschart dd.first{

Span elements represent the column and em elements are those squares in the middle with values.
Spans are positioned absolutely and placed at the bottom, so they could "grow"
from bottom up based on their percentage.

dl#csschart span{
dl#csschart span em{
	border:1px solid #b1b1b1;

Here’s the scheme of one chart bar

css data chart bar scheme

So, how do we set exact height?
We do that by setting the height in percentages for span element. You’ve noticed in the markup section
above that span has two css classes. First one defines it’s type (type1 – type4). In my case types
are used to represent different color. The second class (p0 – p100) is the one that actually defines
span’s height.

dl#csschart span.p0{height:0%;}
dl#csschart span.p1{height:1%;}
dl#csschart span.p2{height:2%;}
dl#csschart span.p100{height:100%;}

So besides putting the value as a text, we have to provide a css class that matches

<dd><span class="type2 p80"><em>80</em></span></dd>

That will do the trick.
Of course, the markup could be generated programatically or by hand, whatever works best for you.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

DeliciousStumbleUpon RedditSubscribe

Comments (28 Comments)

  1. Shani elharrar
    February 3, 2008

    Great article! Thanks for sharing.
  2. Dennison Uy - Graphic Design
    February 3, 2008

    For quick and easy charting I would rather use the Google Chart API:
  3. cssglobe
    February 3, 2008

    Oh, would you? The purpose of this article wasn't to replace google's api. It is here to demonstrate another way of creative css usage. I wrote it step by step so folks can see where I am going at, understand the technique and use it later for charts or something similar. Hopefully I made it clear, sometimes I fail, but what I want to do is share some of the ideas I have and help people learn css. Is API here to educate or even help in understanding how things work? I don't think so.
  4. cssglobe
    February 3, 2008

    Due to some server maintenance, some comments for this post have been deleted. My apologies to comment authors... I kindly ask you to write the comments again, thanks.
  5. Karim
    February 3, 2008

    Wait, wait... you really mean: 100 classes? one for every percent? :) Second, wouldn't it be more interesting if you style the "dd" element directly? without adding a "span"? Something like: [dd class="type2 p80"][em]8[/em][/dd] ?
  6. cssglobe
    February 3, 2008

    @Karim: Yup, 100 classes :) unless you want inline styling generated via scripts. As for dd, I use dd or one reason, it acts as a 100% container. That way I can be really precise. If you put percentages on dd, height would relate to dl element. As you can see dl element is wider and taller than 100% bar should be.
  7. Sangesh
    February 4, 2008

    Awesome... CSS rocks man... I just love this article. Thanks for sharing.
  8. An Jay
    February 4, 2008

    wow...Great artcile. This is great.
  9. Trainingstagebuch
    February 4, 2008

    Thank you for these great article. Greetings Nils
  10. hellbringer
    February 4, 2008

    You can use style="height:1%" etc. without any script and 100 unnecessary classes.
  11. cssglobe
    February 4, 2008

    Inline styling is something you should avoid....
  12. David
    February 4, 2008

    Nice. Reminds me of Personally I'd use the inline height definitions. Inline styling is generally deprecated, but in this case the height relates directly the meaning of the element, so to me it makes sense to define it inline.
  13. pepa
    February 6, 2008

    I use similar bar graphs many years on intranet for production data. You can see samples on When inline styling is deprecated, then use height attribute of image.
  14. Matthew
    February 8, 2008

    Hey author. I took your example and made a not so "pure" version using javascript. Come check it out and let me know what you think. Thanks again for the inspiring article.
  15. Demetrios Kyriakis
    February 9, 2008

    The chart looks very nice, but looking at the implementation it has an extremly major problem: it is *hardcoded* in the image:(. The background containing the axis is totally hardcoded, so basicaly: - it can render on the y axis only percentages, and this only till 100% - it can render on y only values till 12 and with the hardcoded label "days". So this is more "image" based than "pure CSS" :(. The look is however very nice: would you please make upgrade that is a little more general? i.e. not hardcoded axis? Thank you, Demetrios.
  16. Dennison Uy - Graphic Design
    February 9, 2008

    @CSSGlobe yes, I definitely would use Google Chart for data visualization, which you indicated at the beginning of the article. If the goal was to display the capabilities of CSS then you should have said so in the first place.
  17. cssglobe
    February 10, 2008

    It's pretty obvious that this is a css demonstration...
  18. cssglobe
    February 10, 2008

    @Demetrios: Actually, I used css to visualize data I already have in the source. If you look at the non css version of the markup you'll notice that everything is pretty straightforward. There are titles saying "Day 1" etc. and there are values. So, everything is clear (and accessible). Background chart image is a part of the visualization process, just like the background images for bars are.
  19. cssglobe
    February 10, 2008

    So, this article is about taking data formed in a linear, list-type of way and, using the power of css, turning it into something more visual. You may say call it "creative use of css". If some readers fail to see the value of it, and hopefully learn something, I am very sorry. You may use the weapons of choice for every thing you do but don't throw away new ideas :)
  20. Gregorio Espadas
    March 4, 2008

    Excellent!! I've been looking for somethings like this!!! Not JS, not Ajax, just CSS... Amazing!!! Congrats!!!
  21. Skim
    April 9, 2008

    Very nice tutorial! Thanks for sharing this one.
  22. Moksha
    August 7, 2008

    nice article, thanks for posting
  23. sk
    February 12, 2009

    realy nice! thank you
  24. lena
    February 16, 2009

    Chart color bar are missing in the css integration. For this tutorial 1 background image and 4 color images for the chart are needed... this will be better if instead of 4 images only web color were used.
  25. Tiago
    March 17, 2009

    Well done! All your articles are very helpfull,well designed and clear. Thanks for share.
  26. Baronniggar
    March 18, 2009

    Great tuto! I like simplicity of this chart (only css! Awesome). I will use it on my project with some php function :) Thanks a lot Mister!
  27. kinotakara
    April 14, 2009

    Excellent work! All your articles are very helpfull,well designed and clear. Thanks for share. really great post :)
  28. dnyaneshwar
    June 27, 2009

    best teto i like to a simpicity css chart one requist sir please send your site . thank you sir.

Sorry, the comment form is closed at this time.