I love Last.fm's bar graph. It allows me to quickly compare how someone plays one song over another.


I'm trying to apply the same design to my app. It monitors the health of servers and needs to show a lot more stuff. For example, the last column shows the current upload / allocated upload / physical limit upload. Since I need much more text, the label doesn't fit over the bars and some parts are hard to read. Look how ugly the "50 Mb / 60 Mb / 80 Mb" looks. How would you design this better? Keep in mind that there will be hundreds of rows and dozens of columns, so space is limited on the screen.

layered bar graph


I took most of Vitaly's suggestions. I added spaces around the "/". I tried it without spaces and it was too hard to parse. I decided not to color code the text because the lighter green was too hard to read. I labeled each row with the unit, rather than only labeling the header. I sacrifice space for quicker understanding of what the rows are.

bar graphs

  • 1
    Interesting question. I'll try to think about some ideas, but one thing - if you're wanting to make the divisions clear within a bar (as in the 2nd and 3rd column), ditch the curve. Showing straight vertical line makes it much easier to parse.
    – Voodoo
    Apr 1, 2011 at 6:53
  • Are you sure? The rounded edge makes the bar look like it's a bar graph growing to the right. Look at Vitaly's hard-edged diagrams below. It's hard to tell whether it's a bar graph or some composition graph. My graphs are not compositions - the data inside are not mutually exclusive.
    – JoJo
    Apr 1, 2011 at 16:30
  • Good point. Though I was primarily talking about the divisions within the graph, not the rounding on the right side. Having the rounding within the graphs makes it harder to get an idea of where the division is.
    – Voodoo
    Apr 1, 2011 at 17:08
  • One other thought - are you planning to use this to alert users when they're close/over limits? If so varying the colors might be worthwhile as a visual indicator.
    – Voodoo
    Apr 1, 2011 at 17:11
  • old topic, but you could create a custom webfont for pie graphs; you get vector independence & variable colour - see font-awesome for inspiration!
    – ptim
    May 9, 2013 at 12:42

3 Answers 3


How about something like this:

enter image description here

  1. Represent percentages as pie charts. They don't take as much space, there will be a visual differentiation between the different types of data, so the screen has more order to it, and it will be clear that bars always have meaningful width (whereas when you display percentages as bars, then in some columns their width is meaningful - 100px=100Mb, and in the percentage column it's meaningless - it's just 100% percent of something. It's very confusing).
  2. Take the numbers out of the bars. Then you can play with the widths of the bars without being concerned over the numbers inside, both in terms of width and of color.
  3. Only specify each unit of measurement once per row. It frees up a lot of space. As a matter of fact, I'd consider specifying it once per column - in the header. When you need to switch to a different one, just use fractions or multiples.
  • The pie chart is a good idea, but I think it will be hard to do in CSS / HTML. I'll see if there are any advanced CSS3 transforms that would let me do it. I could use Flash, but I'm not sure how loading a hundred Flash pie charts will have an effect on processor and memory usage. Your #2 and #3 are good points though.
    – JoJo
    Apr 1, 2011 at 16:27
  • On second thought, I may have to stick with the bars. Those percentages can go over 100%. Something like 350% means the server is doing 3.5 time the amount of work it should be doing. Can pie charts represent percentages greater than 100%?
    – JoJo
    Apr 1, 2011 at 16:48
  • @JoJo, the pies don't really need to be round. It would be nice if they were, but if that's a problem, you can make it a short vertical bar, too. Just as long as they all have the same height, and look very different from the horizontal bars. Apr 1, 2011 at 17:39
  • @JoJo No, I don't think they can. I tried playing with it once, and couldn't pull it off. But it sounds like the vertical bars option is even more suitable now. But what I would do to accomplish this is not to increase their height once they've passed 100%, but to display another bar next to the first one, and start filling that one. This approach won't work with pies, I think. Apr 1, 2011 at 17:44
  • @Vitaly, I noticed you removed the spaces around the "/". So instead of "66 / 72", you have 66/72". Will this make it harder to read because the numbers are all blobbed into one? I know you did it to save space. I'm considering color coding the numbers to match the bars to visually separate the numbers.
    – JoJo
    Apr 1, 2011 at 18:28

I assume that your requirements state that if a new server is added to your existing rows and it has a 120Mb physical upload limit then the server showing 100Mb in the same column gets smaller?

If that's the case then I sympathise, as the solution isn't as easy as say. 'Find the minimum values and ensure the smallest bars run the full length of the needed text then proportionately stretch fields for each column that contain much larger values.'

My suggestion then, if my assumption is correct is that you focus on a combination

  • Bars without text
  • Halfway marker on each bar due to the variety of lengths
  • Use tooltips that reveal the values herein

The user is able to judge the usage of each resource visually and reveal a second layer of information by hovering over it.

That is if you can abandon communicating the real time values on every bar over hundreds of servers.

PS nice question and I know my idea isn't strictly labelling, more an alternative!

  • You are right on your assumptions. Last.fm sets a minumum bar length so as to fit all the text. But you can see, I have too much text and too little space.
    – JoJo
    Apr 1, 2011 at 1:04
  • If labelling each bar is a requirement that can't be budged on then its not a bad thing its simply challenging. I suppose you could shrink the text if the bar is too small to contain the default size. Or use colour to communicate scales of value. Both need to consider any accessibility issues they bring though.
    – saybeano
    Apr 1, 2011 at 1:15
  • The text is not a requirement, but definitely useful. Last.fm would also be less usable if the song counts were not there on first glance.
    – JoJo
    Apr 1, 2011 at 1:52
  • The song counts are totally appropriate. However there is only one value in Last.fm's application. Is it that the perception of how Last.fm is doing something and how you want to in someway mimic it that might be making your solution a tad complex.
    – saybeano
    Apr 1, 2011 at 18:12

When tight for space in tables, it is far more important to save space on table row height rather than heading row height. Why?

  • There is no use having the table at all, if people don't know exactly what each column is for!
  • There are more table main rows than table heading rows, so a 10% saving on the rows is more significant than a 30% saving on the headings.

I get 30% more bars in the same vertical space as before, so I am using some of that for the 'extra' vertical space for my taller headers.


The headings with key dots and shared text for 'Bitrate' and 'Upload' are not easy to make in html/css. These would be pre-prepared bitmaps. Vitaly has suggested moving the units to the headings, and there is room for them over the sorting arrows.

Some details:

  • Drop shadow on the bars helps to separate them, even though they are very close together.
  • Aggressively reduced letter-space (and removal of actual spaces) allows a larger and hence clearer font for the in-bar text than otherwise would be possible.
  • Lightened colors so that the black text shows clearly.
  • My main concern was labeling the bars, not the headers. The bar text is very hard to read because somehow, I need one text color that works across all 3 bar colors.
    – JoJo
    Mar 31, 2011 at 22:57
  • 1
    @JoJo I that case (all text in one color) you should probably not let the three colors differ on luminosity ("brightness"), but instead adjust the hue. This will give colors that are easy to tell apart and that has (roughly?) the same contrast with the text color. (Disclaimer: I'm not an expert on color theory, but this is how I have understood the concepts :) )
    – jensgram
    Apr 1, 2011 at 6:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.