Design Recommendations for Chart Parts
Axis | Scale | Legend | Grid | User
Support
Axis
- Horizontal axis (X axis, abscissa): Use for independent variable, e.g.
time
- Vertical axis (Y axis, ordinate): Use for dependent variable, e.g. temperature
values
Scale
- Tick marks for scale divisions should not intrude the diagram, but point
outwards.
- Scale
- Standard: Start with 0-0 at the bottom left corner; numerical scales
typically start with 0
- Exceptions:
- all values are much larger than 0 -> let the scale start with
a higher value
- some values are negative -> move zero close to the middle of
the scale
- Add tick marks to the scale at fixed intervals (e.g. 0, 10, 20, 30,
...).
- On scales write 0.1 instead of .1, because the decimal point is easily
overlooked.
- Use only one scale on each axis to avoid confusion.
Legend
- Center title at upper border (or left-aligned for long titles or if texts
might overlap)
- Y-axis: label centered or left-aligned with scale of Y-axis
- X-axis: center label below x-axis
- If possible, mention the source of the data (e.g. in small print below
the label of the X-axis)
- Further recommendations:
- Show units
- Do not stack letters vertically for labels
- If possible, avoid legends and include the information within the chart
- Do not let explanations follow the graph, arrange them horizontally
- Use only one typeface, one font and one weight; use different font
sizes for emphasis.
Grid

Figure 1: Example for grid, labels and axes
- If a grid is needed, do not emphasize it too much; use thin gray or dotted
lines; blue is also a good grid color.
- Put the grid behind the data, not vice versa.
User Support
- Offer the option to show grid lines.
- Display exact values if users click a data point or display numerical values
automatically for each data point or bar/column.
- Offer zooming facilities.
- Offer the option to toggle between chart view and table view.
top