CSS3 Pie Charts Revisited

Quite a while back I figured out how to create pie charts using nothing but CSS and a handful of HTML tags.

In the original method, I used at least two nested elements to create each segment of the pie chart. Well, turns out I figured out how to make it use even less HTML. I now use BEFORE: and (occasionally) :AFTER pseudo elements.

<div class="pie" data-start="0" data-value="30"></div>
<div class="pie highlight" data-start="30" data-value="30"></div>
<div class="pie" data-start="60" data-value="40"></div>
<div class="pie big" data-start="100" data-value="260"></div>

The other thing I did differently with the HTML was to remove ID's for each element in favour of adding data- attributes. You could just as easily use class names like s30 and v30, but I will explain why I like the data attributes later. I was also able to remove the clip workaround to WebKit's now fixed changing an element's transform-position negates border-radius bug.

The technique remains essentially the same. for each piece; convert the inner element (or pseudo element in this case) into a half circle, and hide it from view by setting the outer element to overflow:hidden. Rotate both outer and inner elements to place and size the pie piece. For pieces larger than 50% of the entire pie's volume, use a second (pseudo) element as filler.

as for why I prefer data- attributes over classes, it's so I can complain about the lack of support for the proposed W3C CSS3 attr() function, which would make this technique truly awesome. Instead of creating custom style rules for each possible value of data-start and data-value, I could replace them with two rules:

.pie {
.pie:BEFORE {

Check out the code in action, or even play with it yourself on Code Pen

Tags: , , ,
2013.01.26 04:09 PM | Permalink 0 Comments