Chart
A visual encoding of data, which is only useful if the encoding matches the question being asked.
Definition
A chart maps data to visual properties such as position, length, angle and colour. Position and length are read most accurately, which is why bar and line charts outperform pie charts for most comparisons.
Established research. Originates in published research and has been replicated. The effect is real. Its size in your product still needs measuring.
On this plate
Reach for this when
- Showing patterns, trends or comparisons in quantitative data.
- Dashboards and reports.
Common mistakes
- Truncated axes on bar charts.
- Pie charts with many segments.
- Colour-only series distinction.
- No text alternative.
Chart type by question
| Question | Chart |
|---|---|
| How has this changed over time? | Line chart. |
| How do these categories compare? | Bar chart, sorted by value unless there is a natural order. |
| How is this distributed? | Histogram or box plot. |
| Are these two variables related? | Scatter plot. |
| What is the composition? | Stacked bar. Pie only for two or three parts. |
| What is a single current value? | A number. Most single-value gauges are worse than the number alone. |
Requirements
- Start bar chart axes at zero. Truncating the axis exaggerates differences and is the most common misleading chart.
- Label axes with units. Direct-label series where the layout allows, which removes the legend lookup.
- Provide the underlying data as an accessible table, and give the chart a text description of the trend.
- Do not rely on colour alone to distinguish series.
- Show missing data as a gap, never as an interpolated line.
- Keep series colours consistent across every chart in the product.
Charts people can read
Do
- Label axes with units, and say what the time granularity is.
- Start bar charts at zero, since the bar length is the comparison.
- Provide the underlying numbers as a table, which is also the accessible route.
- Say what the chart shows in a sentence above it.
Do not
- Use a pie chart for more than about five slices.
- Rely on hue alone to distinguish series.
- Truncate a y axis to make a small change look dramatic.
- Animate the data in on every render, which delays reading and tires on repeat.
In practice
- i.
The axis that started at ninety
TruncationA satisfaction score moving from 92 to 94 looked like a doubling on a truncated axis. Nothing in the chart was false and the impression it created was, which is the reason the convention exists.
- ii.
The table underneath
Text equivalentA chart with an expandable data table serves screen reader users, people who need an exact value, and anyone copying the numbers into a report. It is the cheapest accessibility work available on a dashboard.
Local chart
CMP·028 · Region III · Grid F1
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
- [1]
Graphical perception: theory, experimentation, and application to the development of graphical methods
W. S. Cleveland and R. McGill, Journal of the American Statistical Association, 1984
Established the accuracy ranking of visual encodings.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Natural MappingPRIN·008 · Principle
- Color AccessibilityFND·028 · UI foundation
- ContinuityFND·008 · UI foundation
- Data Visualization ColorFND·029 · UI foundation
Often used with
These usually appear in the same screen or the same decision.
- Data TableCMP·025 · Component
- DashboardsPAT·028 · Pattern
Check your work
Review passes that test whether this was done properly.
- Dashboard UX ChecklistCHK·004 · Checklist