I am developing mockups for several charts that we need to display. One of the recurring problems I encounter is that the labels for the category axis (y-axis in this case) are actually made of of several different pieces of information.

For instance in the mockup below the labels are composed of Building ID, Building Name and the square footage of the building. The Building IDs are generally short (3-5 characters) while the length of the building names vary widely. The square footage also has a large range (1,000 to 10,000,000).

Example: Multi-part labels on the y-axis

Note that this list could get exceedingly long in some cases perhaps in excess of 100 unique categories listed on the y-axis.

What is the best way to format the labels such that they are readable? I have tried various text alignments from all left aligned to all right aligned but in nearly every case some information (ID or Name) seems to be "buried".

The addition of sq. footage was a direct request from the client and cannot be removed.

1 Answer 1


It looks as if you have the building name information and the square footage information displayed in the same column with text-align right, why is that?

I would much rather see three separated columns with all text-align left(possibly keeping square footage aligned right). This way it would be much easier to distinguish building name from square footage. And also having the square footage displayed with a fixed visual beginning or end of their textual value would enable the user to quickly identify the magnitude of the value just by seeing how long/short it is in comparison to its neighbours.

  • 1
    I also attempted using bold for the ID and italics for the sq. footage. This was better than my original attempt above but still not as readable as your suggestion. Commented Dec 22, 2011 at 14:48
  • I'm glad you liked it. Hope your client is pleased with the final result! Commented Dec 22, 2011 at 15:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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