Creating Pie and Donut Charts

Hello :),

I recently learned about Penpot and have been learning the basics over the last few days. It is really beautiful and a joy to use.

I am wondering if someone can point me to a tutorial on how to make pie charts and donut charts. My goal is to create separate slices that I can color separately.

I came over from Figma (that’s where I began learning design), so I relied on their functionality to create those. They have a way to grab a point on a circle and open the circle up by dragging the point. Then once you open it up, you can grab another point and open up the center.

I’ve been playing around on Penpot but haven’t figured out how to do it another way. I assume it’s possible but that I just need to learn a new skill.

Thank you :).

3 Likes

I’ve figured out a way to do it by progressively deleting sections of a circle. Just curious if this is the only way?

1 Like

Hello Ellen!

We currently don’t have that functionality but there is a way around it using boolean operations. I’ve created a gif for you to see.

Pie charts

I know it’s not perfect but until we build a specific functionality for it, it’s the best solution I can think of! I hope it helps :slight_smile:

I’ve added your suggestion as an enhancement in Taiga

Thanks!

7 Likes

Oh, wow. Thanks a million!

I created a couple videos on how to create pie charts. Thought they might be helpful for others who are trying to figure it out. One shows the solution shown in the gif posted above by Ester showing how to do it, plus a little addition. And then the second one shows a different solution for making smaller pie slices that I figured out thanks to the gif.

1st video
Creating Pie Charts in Penpot

2nd video
Creating Pie Charts in Penpot | Part 2: Pinwheels

Thank you, again :).

6 Likes

looks interesting ; ty.
Subbed :slight_smile:

1 Like

Those two videos were extremely enjoyable. Thank you very much for taking the time to record them. I’m curious, is there a specific project you’re currently working on that needs those types of pie charts?
I believe you could sort out the “always a quarter left on top” issue by playing a bit with the layers order on your left. There should be a way to intelligently make use of the layers stack and avoid ending up with one quarter “on top”. You can experiment a bit by dragging and dropping different “quadrants” (layers) until you get your desired visual outcome.
Your second approach works like a charm, though! It might be interesting to challenge some community members to try and come up with “faster” ways to do this on Penpot.
Oh! BTW, since you like to duplicate a lot for this, my suggestion is that you fall in love with keyboard shortcuts and do CTRL+D in this case, it speeds up the whole process, the same way you do CTRL+G.

1 Like

You’re welcome, and thank you, @Michel_Parmentier :slight_smile:

Thank you, @diacritica ! I was really happy to make them as it was a way I could contribute. I will try that re: playing with the layers. My mind gets a little twisted around with things like that but it’s a great challenge so I will see if I can make it work.

Thanks also for the tips to speed up the process. I will definitely be using them! Also, I figured out that I only have to make 3 pie slices. From there I can copy and flip to make a half and then copy the half and flip that. Way faster!

I was interested in figuring out how to make a pinwheel because I have a longstanding, on-again, off-again interest in astrology and was thinking of a journal app that might have the ability to let you pull in a chart. I like the idea because charts can sometimes help me get clear on things so it makes sense to include in a journal. May or may not be of interest to others. The idea of the app generally is to create different features (astrology would just be one), and people could choose what they want. It feels like an interesting challenge but also very advanced and I have a lot of learning to do to get there. First I have to learn programming :). Then I have to learn how to create a journal app!

1 Like

That’s wonderful @Ellen We’re superglad that you are finding Penpot useful for your projects. Just make sure you go step by step. Learning to prototype & design as well as code is no small feat, my suggestion would be that you pick one discipline at a time! If you’re enjoying the “creative experience” that Penpot delivers, perhaps you could start with some Visual Design course? I don’t know, giving advice is very tricky :sweat_smile:

1 Like

I really appreciate your encouragement and sharing your thoughts on how to go about it, @diacritica . Thank you! I am doing a survey of everything now and will then zero in.