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.
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
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!
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.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post