Recently we were bouncing ideas around for a new Playground piece. We started thinking about some of the customer projects we were working on and how having a responsive pie chart would help others present data on any device. That's when it occurred to us that we've never seen dynamic pie chart plugins done well. So we created one of our own so others can use them in their projects.
And thus was born Pizza — our brand new Playground piece that allows you to create responsive pie charts with ease!
Delivering Pie Charts in 30 Minutes ... or Less
With efficiency, responsive design and ease-of-use in mind, we set out to create a plugin to quickly create beautiful Responsive Pie Charts. No complicated javascript calls ' just a List, a <div> and some Sass.
- Water Buffalo (60)
- Bison (20)
- Sheep (12)
- Goat (32)
- Shetland Pony (50)
Our work was inspired by the possibilities in Adobe Snap. But while Snap and its predecessor, Raphael.js, give developers a whole library of SVG tools with JavaScript, we wanted markdown-centric pie charts. HTML, not JavaScript.
Built into Foundation with a quick install into your current project, Pizza uses SVG so its curves and angles look great on Retina displays and other HiDPI devices. Each chart takes on the full width of its parent container by default. But you can also give charts a max-width or max-height.
Thinking mobile-first, Pizza uses touch interactions to show each section's percentage per section on touch as well as on mouseover. And Pizza's CSS-based animations lend a smooth feel to its charts on any device that supports SVG.
Use two different SASS functions that take 1 base color and produce stunningly clean Charts. One produces a monochromatic chart and the other creates a chart with varied hues.
Bottom line, if you can make a HTML list, you can make a Pizza pie. Chart.
Get Your Pizza Pie Chart