Graph of current/estimated value

we are having problems trying to come up with a graph that would show the current and the estimated value, while maintaining the simplicity of the graph and still making it clear at first sight what is estimated and what is current.

Here are some graph types we tried before(don’t mind the changing graphic style, we’ve settled on the flat, boxy style for now), from newest to oldest.

enter image description here

I kind of like the newest the best, the problem is when estimated becomes bigger than current, it’d have to switch colors and it could be confusing. The second is not bad either, but having them under each other adds to complexity.

What’s worth noting is that the hero of the graph should be the estimated part, current got a graph of its own up above and it’s here just for the context, so you can see the difference between current and estimated..

Which one do you think is the best, or do you have any other idea, perhaps something completely different(like only showing the difference or something), how to process this?


There’s a name for this sort of thing: they’re sometimes known as bullet charts (or bullet graphs).

enter image description here

enter image description here

An information dashboard specialist (and master self-promoter…) Stephen Few claims to have invented them (really, the core of the idea has been around for ages, he just wrote about good practice and gave it a name). Despite my reservations about his self promotion, his book Information Dashboard Design is worth a look if you design a lot of information reporting tools (just take his bluster and many “Rules” with a pinch of salt…).

As you’ve figured out, the top chart looks nice but just colours alone is problematic:

  • Like you said, it looks odd and confusing if the estimate and actual figure are the other way around in a series of these: suddenly you’ve got some charts in a series looking like they play by different rules to the others, causing people to pay more attention to the form and less to the meaning while they try to figure it out.
  • It’s also less intuitive: you can’t have any clear idea about the meaning of the chart until you look up those two colours on a key. You want people to look at a chart and get the idea of it – then, to look at the labels and key if they want particular details.
  • Finally, it looks like a stacked bar chart – like there’s the black, then the green is much smaller and added to the black – when actually, the two measures are independent of each other and the green is greater. It’s not a good idea to let some people get the wrong idea about what a chart means then force them to un-learn their first impression and look at it again.

Unfortunately if your goal is communicating information, then when something looks nice but is impractical in some way, you really need to put function before form and go with what works best.

A tick on a bar is intuitive and unambiguous: it can’t be mistaken for anything other than some other, secondary measure of the same thing. That’s why it’s promoted as a standard and a convention for things like this. Conventions don’t sound fun, but if they mean people understand the message more easily and simply, they’re worth following (and of course there’s no reason not to add your own twist or flair).

You don’t need all the cruft that comes with a typical bullet chart (like axis labels if they’re standing alone). I’d suggest something like a merger of the best features of the top and bottom chart in the list:

  • You want the background to be clearly a background element (presumably, it shows 0%-100%?) – so the pale grey in the top chart is good.
  • You want the estimate to be intuitive and not misleading – so a tick line for the estimate with the value next to it is good, like in the bottom chart. Why not neaten things up and save space by having ‘Estimate’ one side of the line and the value the other, aligned with each other? Maybe also chunk the line up a little bit so it’s a bit more prominent – if it’s the second most important thing on the chart, it should look like it is.
  • You want the actual value to be simple and strong and clearly the main event of the chart: so a bold dark line like in the top chart is good. No need for rounding: as well as not fitting the stark flat style so well, it adds ambiguity. Is the value the bar indicates the tip of the rounded edge, or the centre of the rounded edge where it starts to taper? Keep it simple.

Source : Link , Question Author : fxck , Answer Author : user56reinstatemonica8

Leave a Comment