7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. Sketch

2 Quick Methods for Creating Pie Charts in Sketch

Read Time: 2 mins

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.

Watch Screencast

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!

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:

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!

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.