Set chart height to at least 80 pixels for 0-100 value comparisons
For exact value comparison in static displays, use chart height of at least 80 pixels on bar and line charts with a 0-100 scale to improve fidelity and mitigate accuracy loss from undersized charts for web viewers.
- purpose:refine
- basis:empirical
- task:compare
- chart:bar
- chart:line
- quality:fidelity
- lever:layout-structure
- reading-mode:exact
advice
Chart height
Increase chart height to at least 80 pixels when readers must compare values on a 0-100 scale. For example, in bar and line charts, revise a 40-pixel chart upward to 80 pixels, but do not expect extra accuracy gains from increasing the same chart to 160 or 320 pixels for this task alone.
reason
Why 80 pixels works
Very short charts compress the vertical distance that readers use to judge differences. Once the chart is tall enough that the pixel resolution roughly matches the data resolution, further height increases add little accuracy for this task.
Mechanism: A taller chart gives readers more vertical separation for tracing and comparing values, but the benefit plateaus once the display is no longer resolution-limited.
Evidence: In the chart-size experiment, 40-pixel charts produced significantly more error than 80-, 160-, and 320-pixel charts, while the larger heights did not differ significantly from each other. The paper concludes that increasing height beyond 80 pixels offers little accuracy benefit on a 0-100 scale. (Heer & Bostock, 2010)
context
Use when chart size is the bottleneck
- User Goal: Compare marked values accurately.
- Task: Exact or near-exact difference reading.
- Data: Quantitative values shown on a 0-100 scale.
- Chart Setting: Static bar or line chart in a web display.
- Audience: Web viewers using standard displays.
- Success Criterion: Lower comparison error.
exceptions
Do not use this as a speed rule
Break it when: Your goal is to optimize response time, or your chart is outside the tested 0-100 bar/line setting. Why: The paper explicitly declined to make timing recommendations from the crowdsourced data, and the height finding was tested only on those chart types and scales.
costs
Costs of increasing chart height
Sacrifice: You use more vertical space. Risk: Blindly making charts taller than 80 pixels can spend space without improving accuracy for this task. Mitigation: Stop increasing height for accuracy once the chart reaches about 80 pixels on a 0-100 scale.
mistakes
Common height mistake
Mistake: Assuming that taller charts always improve value-comparison accuracy. Why it fails: The study found the accuracy benefit at 80 pixels, but not beyond it.
check
How to check chart height
Failure Sign: The chart is very short and readers make larger-than-expected value-comparison errors. Quick Check: If a 0-100 bar or line chart is around 40 pixels tall, treat it as undersized for accurate comparison. Stronger Test: Compare a 40-pixel version against an 80-pixel version on the same reading task and inspect error rates.
fix
How to fix chart height
- Increase a 0-100 bar or line chart from about 40 pixels to at least 80 pixels.
- If the chart is already 80 pixels or taller, do not enlarge it further for accuracy alone.
- Reserve larger heights for other needs, not because you expect better comparison accuracy from extra height by itself.