# Should I fill empty space in bars?

It's about bar-charts in a table.

Every row has a bar, which visualises a value of the row.

The biggest value of the whole table is the maximum of the bars and not necessarily on the same table-page. So most of the rows gonna have bars, which are shorter than the maximum.

If I fill the empty space between to the maximum, the whole impression is heavier, but if I let the space empty it will look like local "page maxima" are the full table maximum.

• If you do decide to do this, then please pick some better colours - there's almost no contrast between the two in your second example.
– JonW
Commented Jun 28, 2013 at 11:26
• You could use light-gray color instead of blue. It would be noticable but not so distractive for an eye. Commented Jun 28, 2013 at 13:28
• Watch out for the 99% issue. Where it looks maxed out by isn't actually. Even with vincebowdren's answer of borders, it's sometimes hard to tell 99% vs. 100%. Having high contrast colors, so there is explicitly something showing as even a single pixel line can help. Or just showing the numbers as well.
– CLo
Commented Jun 28, 2013 at 15:48
• Make sure the two colors aren't exactly the same brightness, since some people are color blind.. Commented Jun 28, 2013 at 16:35
• The simple answer: Should I fill empty space in bars? Yes, until the bartender stops you. Commented Jun 28, 2013 at 20:25

A decent heuristic would be whether the negative space has meaning. If the bar represents something like speed or a metric of productivity, the blue part in your graph doesn't have an important meaning. In that case the bars are best left by themselves against the regular backgound. Just make sure that the user can distinguish between the value 0, and a missing bar, if that is a possibility.

If they are progress bars, or they represent the percentage of women in a company, then the rest of the space has an important meaning (time left, men in company) and you're probably better off coloring the rest of the bar as well.

As usual with these things, the eye has the last word. If it looks right to you, go with it.

• I hope you don't mean Efficiency, which often must be between 0 and 1, because that's the ideal case for when the blue part makes a lot of sense (shows how much is wasted). Commented Jun 28, 2013 at 15:02
• I'm confused by your answer. You said If it looks right to you, go with it which gives me the impression that youre talking about aesthetics but then you went on to explain the psychological possibilities.
– Jeff
Commented Jun 28, 2013 at 17:49
• @Rotsor, bad example, sorry. I meant so generic measure of efficiency. I took it out of the answer to avoid any confusion. Commented Jun 28, 2013 at 18:51
• @Jeff, I just mean to say that if you have a strong first impression about how it should look, that's probably the way to go. It's not really about aesthetics, more about intuition. I'd only go to these kinds of rules, if I couldn't tell at first sight which is better. (I moved this line to the end of the answer to make it less confusing.) Commented Jun 28, 2013 at 18:54

How about leaving out the second colour and instead put a border around each bar? That makes it obvious what the maximum value is, but it also keeps the clarity of the uncoloured negative space.

• I like this, but would recommend using a lighter shade for the border. Commented Jun 28, 2013 at 15:43
• Yes, I think so too; I picked a medium grey when I mocked it up, but a lighter shade would be better. For the bars with a very small patch of green, the grey overpowers it a bit. Commented Jun 28, 2013 at 15:54
• I actually like the dark border, at least for the mockup. Commented Jul 1, 2013 at 3:40
• I used the background color because I wanted to omit borders, from a graphic-design-perspective, completely.
– K..
Commented Jul 1, 2013 at 10:46

The main advantage of visualization is you are just showing the data and nothing else. Adding negative space just to show the ceiling sounds like Chartjunk.

If you just want to show the maximum limit, show a thin line and write what it represents.

download bmml source – Wireframes created with Balsamiq Mockups

This is quite similar to what stack exchange does in it's graph layout of user reputation. The daily 200 rep cap is marked by a thin horizontal line.

The main focus of the user should be on the data (value and height of the graph). Adding negative spaces, un-necessary borders, etc. just acts as a disturbance.

• funny, I thought borders or something would add "junk" to the whole thing, but had the fear that I would need some indicator for the maximum
– K..
Commented Jun 28, 2013 at 14:23
• @K.. A good rule of thumb will be: 'If it add's value/convey's information to the user, it is not junk'
– rk.
Commented Jun 28, 2013 at 14:30
• +1 The stack exchange graphic example is the clearest and best graphic solution. I think the top-voted example is inferior to this representation. Commented Jun 28, 2013 at 15:53
• @AndyW Guidelines do help, borders, not so much. The reason for avoiding borders is they add an unnecessary layer of color. eg: If you want green bars, why are you adding black border line and making it more complex?
– rk.
Commented Jun 28, 2013 at 19:23
• @whuber This is the extreme I was talking about (to be clear, evidence suggests totally minimal vs. outlines makes no difference, not that outlines are better). See Albert Cairo's The Functional Art and discussion plus related lit. as a counter-argument (pg. 65-67). This is in regards to typical graphs though, not dashboard like ones. Most examples of good dashboards I could find (via Stephen Few) agree more with you and rk, no hard outlines but varying use of guidelines (e.g. Few's bullet charts, Cleveland's marker at the midpoint). Commented Jun 30, 2013 at 13:50

I think it's better to leave the empty space as it is. Looking at the second graph, it's obviously hard for a user to understand whether the blue ones are the fully filled or the green ones.. With the first one, it's easy to understand how much data is there or not.

But if you want to give a color in the empty space, I suggest you go for a transparent red. It will work better for you. Green and blue looks good, but it isn't doing what it is meant to do.

• yes, the blue looks no more negative than the green.
– K..
Commented Jun 28, 2013 at 11:25

Does it matter if people can or cannot recognize that longer bars are not the entire width? How will the possible misinterpretation by the user that a bar is the full width detract from the user experience?

It seems to me that if you needed precision, you wouldn't be making the bars that size; you would make them larger or would use a completely different mechanism. If precision is not important (and it seems to me that it isn't), then I think the additional elements mentioned in other 'positive' answers would harm the UX by cluttering the UI and/or confusing the user.

So to answer your question. No. Don't fill in the empty space.

I also think the bars should have empty space.

The reason for this is the purpose of those bars: they have to graphically visualize the difference of the numbers in chart. So empty space will make this difference more easily distinguished.

If you look at the chart you see for example the first four items have six figure numbers but you can't see the difference between them at once. That's where bar charts come in handy.

One thing that I would suggest as an improvement (maybe) is include all items in chart (down to Win31) have bars. Now if you concentrate on the bars it looks like they have no value. I will start with the last item as the thinnest bar and recalculate to the top proportionally.

It's basically a visualization question asked more from the perspective of your user group. I would suggest leaving it empty but having a depth or a shadow to the bar element, this would make it more clear as to what the deficit is.

Mostly when you use multi-colors in a bar( full+empty) its not a very good UX experience. Though it looks trendy, yet the brain has to function more to grasp, this is more because still the notion we have in a general case is: null is empty not colored. But taking this approach please do maintain an outline.

This is a design problem. Use a lighter color to denote the maxima, like a 25% grey. Then the data will be clear without the page looking heavy.