Why are chart x-axis values slanted bottom up for long labels?

Question

Anyone knows why when we need slanted values at the x-axis, for example for a bar chart, why slanted values are always left to right, bottom-up (as in the image), instead of being displayed up-down?

Answer 1

TL;DR

Reading comprehension is probably not the key factor. What matters is whether "expected use" of the chart (or table) goes from the label to the chart/table or vice versa:

• If going from label to chart/table, you want the end of the text next to the corresponding column in the chart/table.

• If going from chart/table to label, you want the start of the text next to the corresponding column in the chart/table.

The OP's chart is an example of the first option (the labels lead to the corresponding bars).

Note: these "rules" mean the "preferred" direction of slant (for a given use-case) is reversed if the labels are above the data (typically, a chart is labelled at the bottom; a table is labelled at the top).

The Options

Assuming you keep the basic orientation of the chart the same, then there are five ways of arranging the labels:

1. Slanted, bottom-left to top-right (as in the question). You tilt your head to the left to read.
2. Slanted, top-left to bottom-right. You tilt your head to the right to read.
3. Vertical, bottom to top. Extreme version of (1).
4. Vertical, top to bottom. Extreme version of (2).
5. Stacked. Letters are in their "normal" orientation, but one atop the next (also known as marquee text).

So, which one (if any) is "best", and what affects that decision?

Note: although the question talks of labelling a bar-chart, similar arguments will apply to labelling a table (e.g. this example).

Rejecting Stacked / Marquee Text (option 5)

The easiest to dismiss is the last: stacked or marquee text. Every reference I've seen say it is the hardest to read. For example, the study Reading Vertical Text: Rotated vs. Marquee [pdf] found that marquee text is slower to read than either vertical orientation (and all three are slower to read than normal horizontal text):

An experiment was conducted to investigate, and found that marquee text is indeed read more slowly than rotated text, and that rotated text is read more slowly than standard horizontal text

Conclusion: stacked text should be kept for "special occasions" such as Hotel signs.

Vertical Text: Bottom-up or Top-down (options 3 & 4)

The same study notes that the orientation of vertical text made no difference:

However, no evidence was found for a difference between left- and right-rotated text.

Elsewhere on UX, an answer to "Is clockwise or counter-clockwise rotated text easier to read?" also opines that neither is easier to read than the other, but does quote a Wikipedia article on spine titling stating that – at least as far as books is concerned – "conventional" orientation depends on geography:

• In the United States, the Commonwealth, Scandinavia and for books in Dutch, titles are usually written top-to-bottom on the spine. This means that when the book is placed on a table with the front cover upwards, the title is oriented left-to-right on the spine. This practice is reflected in the industry standards ANSI/NISO Z39.41[39] and ISO 6357.

• In most of continental Europe and Latin America, titles are conventionally printed bottom-to-top on the spine so, when the books are placed vertically on shelves, the title can be read by tilting the head to the left. This allows the reader to read spines of books shelved in alphabetical order in accordance to the usual way left-to-right and top-to-bottom.

However, a comment on the Danthonia Designs Blog, "Which Direction Should Vertical Text Go?" states:

In conventional drafting, where construction drawings were bound on the left spine, vertical text would ALWAYS run ‘bottom to top’, making it read left to right when the drawing was rotated 90º with the bound edge at the top.

While this helps explain a convention, it doesn't suggest either direction is better than the other (at least on a computer screen).

Conclusion: Vertical text is preferable to stacked text, but – as far as ease of reading is concerned – there's nothing (other than local convention) to choose between options (3) or (4). (But see "Bottom-Left to Top-Right or Top-Left to Bottom-Right" below for overall ease-of-use).

Why Slanted is Best (options 1 & 2)

One advantage of options (1) and (2) compared with the rest is that – because of the slant – they take up slightly less vertical space. Not necessarily a major factor, but sometimes it may be enough to rule the last three out.

Although the study referred to above didn't consider slanted text, "intuition" suggests its reading speed should be between that of vertical and normal orientations. This is backed up in an answer to "Usability of vertical text" which cites a study on Mental Rotation of Three-Dimensional Objects. That study contends that we "mentally rotate" images at a constant rate, so – since slanted text is between vertical and horizontal in terms of rotation, it should be between those two in terms of reading speed.

Conclusion: Slanted text is easier to read than both vertical and stacked text.

Bottom-Left to Top-Right or Top-Left to Bottom-Right

In other words, this way (option 1) or this way (option 2)?

Unlike with vertical text (options 3 or 4), finding a comparison of which of options 1 or 2 is easier to read is proving difficult (as seemed to be the case in this discussion, which essentially asked the same question but came to no conclusions). Without solid evidence to go on, I can only make suppositions:

• For isolated text, if neither orientation of vertical text is easier to read than the other, it would seem logical to conclude that neither orientation of slanted text would be easier to read than the other.

• Rob E's answer I think raises the key issue: it depends on how you use (or expect your user to use) the chart or table: that is, whether you go from label-to-data or from data-to-label.

For charts (or anything where the labels are at the bottom):

• If you start with the label, then with option 1 (as in the OP's question) the end of the label is positioned next to the corresponding column in the chart, making the transition from label to chart natural.

• If you start with the chart, then with option 2 the beginning of the label is positioned next to the corresponding column in the chart, so making the transition from chart to label natural.

If, however, the labels are at the top (as is typical in tables), then the opposite applies. Option 2 labels lead naturally from label-to-data, and option 1 labels lead from data to table.

Answer 2

In the west languages are often read left to right.

Let's look at the alternative first. If the chart labels were top-down and left-right, you would be read the label and the last letter of the label would hang over the next (wrong) data set. This doesn't make much sense if people are reading labels first and then looking at the corresponding data.

When using the method you demonstrate (left-right, bottom-top), we read the label first and we end up at the corresponding data after the last letter of the label.

So it can be quite dependent on if people usually read the label first or not but that is an entirely different question altogether.

Answer 3

If you're prioritizing legibility and scanning of volume, flipping the chart to a horizontal bar chart can make room for longer labels, improving legibility and sorting by magnitude.

^{download bmml source – Wireframes created with Balsamiq Mockups}

This doesn't answer the question directly, but you might want to consider a horizontal bar chart in certain situations.

storytelling with data has a nice write up on this. They also add the ability to sort, so you can see the most important data at top.

Ordered the data from greatest to least. This creates a visual construct, making the data easier to consume. (Note: if there is an intrinsic order to your categories that's important, you would leverage that, but in absence of that, sort either ascending or descending by value)..

When horizontal bar charts are better

Depending on your use case (which I'm unfamilar with), there are times when a horizontal bar chart layout is better: when time is the x-axis.

A useful insight comes from bar graph readability

horizontal bar graphs aren’t always the best choice for your data presentation. One case where vertical bar charts are best is when graphing data over time. Dates are best understood when the x-axis is treated as a timeline, so turning that graph on its side would be confusing. Another case to use vertical bar charts are ordinal, or sequential, data series. For the same reason as a timeline, if looking at a count of salaries or ages, the data series should be put in order from smallest to largest on the x-axis.

Answer 4

You can plot the bar chart from right to left, column chart from bottom to top, some people like looking at the largest and some may sort country ascending.

Agree readability: the degree of ease for readers and message to them

Re Luciano: Slanted values for x-axis because the text is too long to display (say Excel). For example, sort from A-Z to Z-A, people get used to view from A-Z (smallest to largest), but for Z-A (largest to smallest), sometimes people like viewing top 10/ top 5, like Top 5 sport shoes brands.