Pie chart enhancements


Really enjoying Balsamiq 3 for making mockups, but today I ran into something of a headache - pie charts.

While I was able to mock up what I needed for a client, it would be great if making pie charts was as flexible out of the box as other highly configurable controls are.

Most controls support some textual content to provide functionality, and I think pie chart could support something similar.

For example, supporting a value of:

20, #ff0000
30, #00ff00
50, #0000ff

This would give you a pie chart of three segments, covering the multi-segment angle as well as colouring, since for some customers I could see that being really important - one of my customers looked at the diagram I’d made and understood that the mockup wasn’t ‘final’ for anything else but that the colours had to be ‘right’ before they’d accept it and it had to be representative, they couldn’t quite imagine a pie chart that didn’t have the right number of segments in the right colours.

It would be great if we could get a ‘donut’ option as well but a more configurable pie chart would be amazing for the future.

Thanks for consideration,


Hey Pete,

Thanks for letting us know you’d like to see this. You definitely aren’t the first person to ask, and while I’m not 100% sure it’s in the spirit of a low-fidelity wireframe, I will make sure the team knows you’d like to see it. If enough folks want it, it’s something we will take a look at.

If anyone else would like to see this, please like this post or comment below!


Brendan, I’d say this is as much in the spirit of low fidelity as the ability to set an approximate percentage position for scroll bars, adding complex details to a grid (URLs and such), toggle checkboxes & radio buttons on or off, or add icons to trees and lists. There are some things that you just need to show closer to reality to make non-designers see what you’re getting at.

In fact, not just pie charts, but all the charts would benefit from a minimal amount of configuration.

For pie charts, don’t let a user add as many different sections as possible, but set a limit - say from two to four/five. You default the regions to a greyscale series (I suggest white, gray4, gray3, gray2, grey1). To simplify, leave it like that or you could choose to let users change the colours. Also to simplify, just prepare four unique layouts, with each new region cutting less than half out of the last one rather than letting the user pick percentages. You could support the “donut” style with a toggle button that either hid or shows the centre of the pie.

For Bar and Column charts, stay with four bars/columns but let the user adjust the height of each using a slider. Again, either stick with greys or let the user pick two colours.

For Line charts, let the user choose from one to four lines, each one using the grey1 to grey4 colours by default and, again, possibly allowing the user to change the colours.

This would give users a little more flexibility for charts without moving out of the low-fidelity stage.



I can totally see that side, Jenni. I know there has been hesitation to do it before, but we will see what happens when the re-write dust settles. :slight_smile:


Jenni - if I need something like a bar chart or line graph or pie chart, I create it in Excel so that I can format to the level that I need/want and then copy/paste the image into Balsamiq. A bit of a kerfuffle, but I also have clients who need to see colors, format, etc.



@mrcortina1217 Yes, I’ve done things like that too. I’ve even just faked it using rectangles, shapes, rules and arrows, but both the technique you mention and crafting one from other available controls is, as you say “a bit of a kerfuffle”. For first order wireframes having a quick way to get the idea across with just a bit more “flair” than the current static control would result in a far more efficient process.


I agree with Jenni. Some basic configurations and able to set colors in Balsamiq will be useful. Switching back and forth between Excel and Balsamiq while possible gets tedious for simple changes.