20 Useful CSS Graph and Chart Tutorials and Techniques

Adrian  •  Coding  •  January 13, 2012  •  5 Comments

An accessible bar chart

CSS3 Graph Animation

CSS3 Bar Graphs

CSS3 Chart

CSS3 bar charts

Animated wicked CSS3 3d bar chart

A Snazzy Animated Pie Chart

How to Create Pie Charts with CSS3

Page 1 Page 2

If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

5 Comments
  1. Johnny Jan 14, 12:30 am

    Very interesting stuff! lovely read. Actually gave me a good idea :]

    Reply
    +1
  2. Mike Jan 14, 6:05 pm

    Some of the charts looks even better than those included in latest Microsoft Office by default.
    Will try to use smashingmagazine’s offered CSS charts to recreate my wordpress stat counter plugin. I think it will perfectly fit the overall UI.
    Adrian thanks for collecting the list!

    Reply
    -1
  3. Ajmal Raza May 17, 6:22 pm

    Have you ever even tried to create your own CSS graph? If you have, you will know how hard it is. Using Flash is one way to go, but you just can’t beat a beautifully crafted CSS Graph. Have a look at these tutorials and techniques.

    http://www.handycss.com/how/how-to-create-bar-graphs-with-css/

    Reply
    0
  4. Sergio zambrano Aug 11, 11:37 am

    I invented a new system, that not only uses CSS ONLY, but also uses the SAME human text, rather than building the bars with divs or HRs, which can be microformatted for better SE indexing.

    http://socialblogsitewebdesign.com/semantic-yet-seo-friendly-graph-bar/

    It doesn’t use images, canvas, SVG, divs, JS, nothing. Just the numbers needed for humans and SEs i.e. “38%”

    I think it could be even expanded to vertical bars, and endless styles (bar, outline, 10%-markers, etc), with just a font generator to let people style their bars, which could be cached and shared!

    Not sure about pie charts, but certainly dots instead of bars could be made too, with a little imagination :)

    I’ll appreciate any input.

    Thanks.

    Reply
    0
  5. david Jun 5, 11:55 pm

    Also consider YUI3. It’s an awesome js library from Yahoo and it has some really awesome chart building tools

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters


Notify me of followup comments via e-mail. You can also subscribe without commenting.