Ian McFarlan

Simple SVG Pie Charts

19 Apr 2017

You’ve got a percentage value and you need a simple pie chart output; SVGs and a bit of JavaScript to the rescue. SVG support is pretty widespread these days and is only going to get better.

Disclaimer: I am have a fine arts background and math isn’t my forté. That said this technique has served me well for simple, dynamic pie charts. 

Below are snippets of CSS, HTML, and JavaScript. I’ve opted for vanilla CSS and JavaScript for portability and versatility. Feel free to SASS it up. Maybe stay away from jquery for this though; no need for it with something this simple.

This example would render a pie chart with a diameter of 80 pixels. This technique only works well when working with a single percentage value. For more roubust pie charts have a look at the further reading section below.

 

See the Pen Simple SVG Pie Charts by Ian McFarlan (@mcfarlan) on CodePen.light

Further Reading

My name is Ian McFarlan and I have been a web developer since 2003. I’ve mainly worked in client services and advertising but lately I have been getting my hands dirty with product development.

Work | About | Contact

More Articles