Design Recommendations for Chart Parts

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

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.

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.

Example for grid, labels and axes

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.

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.