Menu

8 CSS Techniques for Charting Data

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

This was published on Sep 20, 2008

42 Comments

Stijn D Sep 20 2008

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

Sebastian Paaske Tørholm Sep 20 2008

Those gray ones in the second link are pretty slick.

Dainis Graveris Sep 20 2008

Great charts! Love the first one.

nasirjumani Sep 20 2008

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

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.

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!

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

Interior Mart Sep 21 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! :)

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 Sep 21 2008

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

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

Jacob Gube Sep 21 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.

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

Tristan Sep 22 2008

Oh man, this is great.

Very useful materials

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

great graphics. i like the first one.

Zaman Hasanov Sep 23 2008

thanks for the post.

Josef Baros Sep 23 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.

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 Sep 24 2008

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

Thanks for you Effort

web design company Sep 25 2008

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

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 Sep 26 2008

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

thanks for the post.

Designer Oct 11 2008

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

Exdizajn Oct 31 2008

Great list, thnanx for share

Thanks for you Effort

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

JC Cameron Nov 20 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.

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

Yanay Zohar Feb 22 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!

You might also enjoy my old area charts.

Flipping Apr 05 2010

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

Kenneth May 21 2010

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

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

GekkoGall Jun 10 2010

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

Bernhard Jun 11 2010

Thanks for sharing the post!

Nargile Mar 19 2011

i need for share

Simply great! thank you very much!

Nargile Apr 12 2011

Thank you very much,nice sharing

this is what I was looking for, thanks

This comment section is closed. Please contact us if you have important new information about this post.

Partners