2 Quick Methods for Creating Pie Charts

In this video tutorial I’ll show you how to design pie charts using Sketch. You can create pie charts manually using shapes, masks, and the pen tool, however I’m going to show you two approaches which are far quicker and more precise.

2 Quick Methods for Creating Pie Charts in Sketch

Method #1

This is the easiest approach, and involves the use of a plugin. Sketchy Pies was created by Aby Nimbalkar and creates pie charts from your circle layers.

Begin by creating a circle. Then, with it selected, go to Plugins > Sketchy Pies > Convert to Pie Chart. You’ll then see a prompt where you can enter a comma-separated list of color hex codes. Add as many as you like, then click OK; your pie is ready!

2 Quick Methods for Creating Pie Charts in Sketch

These pie sections are cleverly constructed using borders. You can edit each one by selecting them, then changing the border properties. The border color will change the section color, and you can alter the dash measurement to change the size of the section.

You can also specify the section sizes when you first create the pie. This is done by appending each color with a value, like percentages for example: #444444:20%,#555555:80% or decimal values like #444444:.2,#555555:.8.

Method #2

Creating pie charts with angular gradients is a little more involved, but that’s what we’re going to do now! Begin with a circle object, then go to Angular Fill in the properties sidebar. Add two color stops for every section you need for the pie chart:

2 Quick Methods for Creating Pie Charts in Sketch

You can position the color stops along the gradient precisely, using the number keys on your keyboard. Hitting 2, while your color stop is selected, will position it exactly 20% along the gradient. The start of each new section will have to be positioned exactly where the end of the previous section is.

Note: I’m using Sketch version 41.2, and you’ll notice that where the sections join there’s a jagged line. This hasn’t always been the case, so I’m pretty sure it’s a Sketch bug. Let me know if you use a different version and see better results!