CSS Pie Charts

Creating dynamic visualizations without images.

Combining two CSS3 transforms — skew and rotate – along with some basic (albeit long-forgotten) high-school geometry, we can visually, dynamically, visualise data.

We skew rectangular elements based on the given percentage. By rotating each element around a common point we create “slices of pie”. The parent container uses border-radius: 50% and overflow: hidden to create a circular mask.

While the degrees of percentage and rotation points can be calculated by hand, I’ve coded a jQuery plugin to do the mathmatical lifting for us.

Colors and percentages are dynamically generated on each chart generation.

Le Code: JavaScript

Le Code: CSS