vocab.design

layout · dataviz

Chart aspect ratio

also called banking to 45 degrees, banking

How wide a chart is for its height, which sets the slopes of its lines; banking to 45 degrees keeps rates of change readable.

A line’s slope is not a property of the data. It is a property of the data and the box you drew it in. Squash a chart into a wide, short strip and every rise flattens into a drift. Stretch the same numbers into a tall, narrow panel and the same rises turn into spikes. Nothing in the series changed, no axis was cut, and the reader’s impression of how fast things are moving has been rewritten entirely by the shape of the frame.

William Cleveland’s answer to this is banking to 45 degrees: choose the width to height ratio that puts the average orientation of the line’s segments at roughly 45 degrees, because that is where the eye judges differences in slope most accurately. Very shallow segments all look equally flat and very steep ones all look equally vertical, so the useful discrimination sits in the middle. The rule is a target rather than a law, and eagereyes has a good account of how loosely it holds up under testing, but it gives a defensible starting number in an argument that otherwise gets settled by whatever space the layout had left over.

The mechanism people reach for is aspect ratio box, and the two words are not doing the same job. An aspect ratio box is the CSS that holds a chosen ratio while a container resizes. Chart aspect ratio is the judgement about which ratio tells the truth, which is what you feed that mechanism. Letterboxing is the third neighbour and the one to avoid here: bars around a chart that will not reshape are wasted room, since a chart is not a fixed picture and a plot area can genuinely be redrawn at whatever shape it is given.

In practice the ratio is usually decided by accident. A chart dropped into a full width card gets whatever height looked tidy, a chart in a dashboard cell gets whatever the cell was, and a responsive plot silently re-banks itself at every breakpoint, so the same figure argues differently on a phone and on a laptop. Two habits help. Decide the ratio from the data, by looking at how much of the value range a typical step covers, and then hold it with a ratio box rather than a fixed pixel height. And be suspicious of a very wide, very short plot that happens to make a worrying trend look calm, because that is the same rhetorical move as a truncated axis made with geometry instead of numbers.

Which word?

If you wantsay
a line chart reads too steep or too flat for the story it tellschart aspect ratio

Related

See also: Chart · Aspect ratio box

Sources