8 CSS Techniques for Charting Data

Sep 20 2008 by Jacob Gube | 42 Comments

There are many ways you can present numerical, chartable data by styling elements using CSS. Using CSS to style your data prevents you from relying on static images and increases your content’s accessibility.

Below, you’ll read about 8 excellent techniques for styling elements into beautiful, accessible charts and graphs.

1. CSS for Bar Graphs

CSS for Bar GraphsView Demo

This tutorial showcases three ways of graphing data. The Basic CSS Bar Graph example involves a <div> to contain the graph, and styling a <strong> element as a block element and using percentage widths to adjust the width. A great modification of this technique is to use a paragraph <p> element instead of a <strong> tag for semantically-correct HTML. The two other examples use a definition list and unordered list to graph multiple bars.

2. Accessible Data Visualization with Web Standards

Accessible Data Visualization with Web Standards - screen shot.View Demo #1View Demo #2View Demo #3

Author Wilson Miner discusses the concept of accessible, standards-compliant techniques for data visualization mentioning the benefits, limitations, and alternatives in brief. The A List Apart article shows you three data visualization techniques using a basic structure of unordered lists.

3. CSS Vertical Bar Graphs

CSS Vertical Bar Graphs - screen shot.

Eric Meyer shows us another technique for graphing vertical bar graphs using unordered lists similar to the "CSS for Bar Graphs" technique from Apples To Oranges.

4. Creating a Graph Using Percentage Background Images

Creating a Graph Using Percentage Background Images - screen shot.

In this technique, you use pre-made background images to shade in the appropriate data. The downside of this technique is that you’re limited by the pre-filled background images that you have and making more to suit your needs will increase the amount of classes you assign to your data – increasing the file size of both your CSS and HTML file as well as increasing the number of HTTP connections needed to render the page because of the background images.

5. Pure CSS Data Chart

Pure Css Data Chart - screen shot.View Demo

This example uses a definition list for mark-up. A <span> element inside the <dd> definition list item serves as the element that gets adjusted in height to shade the appropriate area. An <em> element is used to display the numerical representation of the shaded area, absolutely-positioned in the middle of the bar.

6. CSS Scatter Plot

CSS absolute positioning scatter plot - screen shot.

A scatter plot is another great way to graph two-dimensional data. In the example, each data point is clickable, so a possible modification to this technique is to use a modal window that displays extra information about a particular data point.

7. Definition List Bar Chart

Definition List Bar Chart - screen shot.

This technique shows two examples of styling definition lists into horizontal bar charts. Each definition list item is assigned a class that adjusts its width using percentage units.

8. Accessible Bar Chart

Accessible Bar Chart - screen shot.

This technique showcases a method for semantic, accessible bar charts by using a table as the basic structure of the bar graph and using CSS to stretch a background image to its appropriate width.

Related Posts

42 Comments

Stijn D

September 20th, 2008

Yes, nothing beats CSS for bar-charts.
It’s a shame you can use them for other charts :-(

Sebastian Paaske Tørholm

September 20th, 2008

Those gray ones in the second link are pretty slick.

Dainis Graveris

September 20th, 2008

Great charts! Love the first one.

nasirjumani

September 20th, 2008

liked them all…especially the second and last one..stumbled!

cyhung

September 20th, 2008

css is great to make static charts or display static results (such as for polls). it’s very accessible and requires very minimal development. but even in that instance, the best use is still for bar or line charts. the plot chart looks pretty cumbersome to me.

Jos'h

September 21st, 2008

If you go to the demo for example 1, then turn off CSS processing in your browser, a whole bunch of links become visible at the bottom of the page. Firefox has them listed as possible attack sites (as in they attempt to install virii on your system, I guess). You might want to investigate and mirror the demo locally if so…

The graph examples are very nice otherwise though!

Kiran

September 21st, 2008

These are very much useful for a web developer. thanks for the post.

Interior Mart

September 21st, 2008

Excellent selection of graphs, just in time as well as I’m busy working on making charts but would have been using Corel, these are much better – thanx! :)

Justin

September 21st, 2008

Frankly—it’s pointless to do this. It’s a great exercise into the exploration of how far you can take CSS. And kudos to you for doing so. But graphics are better. You can do far more with a graphic, like better designs and a greater variety of chart types (that doesn’t mean I’m advocating cluttered, over-designed charts—those are hard to read).

Images are more flexible to the end user. If somebody needs to use a chart for something (say email it) they don’t have to take a screen grab. They can save it.

And finally, a longdesc file is infinitely more accessible than a bunch of styled numbers. A longdesc file not only will give you the numbers, but it allows you to describe the nature of the graph. What it means, what you should take from it…etc

detailCode

September 21st, 2008

These will be very useful on my websites for reporting. Does anybody else have any portfolios to share?

Meomix

September 21st, 2008

.5 and .8 are pretty sweet, thankfully i now know how to make that Shiny Bar effect :3

Jacob Gube

September 21st, 2008

@Justin: A large part of why I put this collection together was to evoke ideas on how to apply CSS to things you may not have thought of before.

Let me offer a counter-argument about graphics being better. If your page is generated by pulling stuff from a database, it would be easier to render said data into more flexible HTML elements like tables or lists as opposed to static images. Although we can make an argument about generating images server-side, this method may be more trouble than its worth plus I’m assuming this requires a significant amount of system resources.

Additionally, you can use semantic HTML like a table element with the proper table headers to help you describe the structure of your data – and then styling it into bar graphs to make it more visually appealing for those with no visual impairment.

I can’t argue about assigning longdesc attributes to image elements – it’s a valid method for describing visuals even though it does involve a separate document. For those that are scratching their heads wondering what we’re talking about, check out this example on longdesc.

I also can’t argue about the convienience of sharing images through email, or even saving it and/or using it in (for example) a presentation or PDF file without screen grabbing.

Let me close by saying that you should use what works for your situation, your needs, and your preference. The arguments you’ve made are completely valid, and I’m not saying you are wrong… but rather that there are counter-arguments to your points. I do hope that the main things to take away from these techniques is that CSS gives us a lot of flexibility and that innovation outside of conventional knowledge (i.e. what our college professors teach/taught us) leads to the progression of our craft. At the very least, I hope people have found something they can apply to or think about when a need for data visualization arises in a project.

@everyone: Thank you everyone for dropping your thoughts in the comments! And let me drop a shameless plug for my RSS feed that you may consider subscribing to if you’re into reading about stuff like this. Thanks again.

Evan

September 21st, 2008

I like the markup for #2 it’s nice and easy to follow.

Tristan

September 22nd, 2008

Oh man, this is great.

Very useful materials

Anders

September 22nd, 2008

Cool! I remember a time when I just tables and gifs to do this stuff and it never looked as good as these examples. :-)

Mario

September 22nd, 2008

great graphics. i like the first one.

Zaman Hasanov

September 23rd, 2008

thanks for the post.

Josef Baros

September 23rd, 2008

I do not agree with Justin. There are situation, where images are not usefull. When your data changes every hour, or even minute, you would need thousands of images. Justin, there are many situations and also many solution. Let everybody to select solution which fit the best to his problem.

For those which are interested: some other examples of bar graphs you can find on my site (swatelier.info/at/articles/). You can see examples of production plan graph, downtime graph, silo filling simulation, or even live
pinging graph with Ajax.

Will

September 23rd, 2008

This is great! I appreciate it. I don’t think many folks here realize the possibilities of what you’ve shown us. I was toying with the idea of making a WordPress plugin that allowed users to add data to the backend and have this kind of thing show up on the front end of any given webpage that you designated. Anyways, I think these CSS enabled graphs can be used in conjunction with other sites to enhance public interest and knowledge in any given subject. Great post

digyourlove

September 24th, 2008

I think this is not too difficult to realize in function.
use 1px picture to be 1% as data…

Khalid

September 25th, 2008

Thanks for you Effort

web design company

September 25th, 2008

8 excellent techniques for styling elements into beautiful, accessible charts and graphs

Lois

September 26th, 2008

Thanks for this. But I need to point out that number 4 is flawed. Look at 20% and look at 80%. The amount of blue in 80% should match the amount of brown/red in 20%.

james seo

September 26th, 2008

i didn’t even know you could take css that far. Oh the possibilities if mixed in with php.

nvxiao

September 26th, 2008

thanks for the post.

Designer

October 11th, 2008

wow.. i love css and all such tips and tricks… thanks sixrevisions.com :)

Exdizajn

October 31st, 2008

Great list, thnanx for share

re8

November 1st, 2008

Thanks for you Effort

Rafiq

November 7th, 2008

What else can i say?.. This is freaking awesome. Great work.

JC Cameron

November 20th, 2008

Great examples and can see how both methods of implementing charts have their pros and cons. Quick question – anyone have a suggestion for really high quality charts of all kinds that can be generated server side? Either open-source or commercial is fine…just looking for something that would look great when exported into a PDF for delivery to a client. Something as good as you can get from MS Excel without having to do it manually in excel.

Kashio

January 12th, 2009

If the variables can be updated automatically on servers, it would be awesome to show this on public websites to show statistics.

Yanay Zohar

February 22nd, 2009

Very nice compilation. I think I have checked just about every javascript & flash library, while completely overlooking the CSS power. Simplicity wins again! Thanks!

Hans

April 23rd, 2009

You might also enjoy my old area charts.

Flipping

April 5th, 2010

Once I think I know everything about css you throw this my way… ;-)

Kenneth

May 21st, 2010

Great list here you just have to love CSS, think the 2nd chart is great!

Animas

June 8th, 2010

Once I think I know everything about css you throw this my way… ;-)

GekkoGall

June 10th, 2010

Great list here you just have to love CSS, think the 2nd chart is great!

Bernhard

June 11th, 2010

Thanks for sharing the post!

Nargile

March 19th, 2011

i need for share

Vestir

April 8th, 2011

Simply great! thank you very much!

Nargile

April 12th, 2011

Thank you very much,nice sharing

omarxp

April 30th, 2011

this is what I was looking for, thanks

Leave a Comment

Subscribe to the comments on this article.