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.
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.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
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 MappingPrinciple
- Color AccessibilityUI foundation
- ContinuityUI foundation
- Data Visualization ColorUI foundation
Often used with
These usually appear in the same screen or the same decision.
- Data TableComponent
- DashboardsPattern
Check your work
Review passes that test whether this was done properly.
- Dashboard UX ChecklistChecklist