Axes
Axes help the user understand proportions and scale of the data for a chart. The x-axis (horizontal) is positioned at the bottom of the chart while the y-axis (vertical) is positioned on the left side of the chart. In some cases, a chart may have two y-axes.
X-Axis
The x-axis is positioned at the bottom of the chart. It is most often used to portray the time increment in a set of data.
Y-Axis
The y-axis is positioned on the left side of the chart. In some cases, a chart may have two y-axes, in which they are positioned vertically on both left and right sides of the chart.
Grid
In addition to the x- and y-axes, grid lines may be displayed at each labeled point along the axes. This makes the chart clearer and easier to read, especially for charts such as line, scatter, bubble, and area. Grid lines should be center-aligned to their corresponding labels.
Titles and Labels
All charts with axes should have titles and labels. Titles and labels help orientate the user and provide context to the data being displayed in the chart. Labels should be concise whenever possible and can be abbreviated (eg. 100,000 = 100k) first before needing to be truncated. Labels should be in a logical order and, for number series, start at 0 and be in equal increments.
Axes Titles
Axes titles should be short and descriptive. Titles ensure context for the displayed information is understood clearly.
Note: There may be instances when axes titles can be hidden. For example; the axis scale is self-evident (eg. Time) or the chart title describes the axis scale. Use caution when hiding axes titles, as it may cause confusion about what the chart data is showing.
Axes Labels
Axis labels should not wrap but be truncated after 64px and display a tooltip on hover. If there are many labels and the label width shrinks to 32px, labels should be rotated 90 degrees.
The amount of labels along an axis can be reduced if space is limited but only when the increments are obvious and can be reduced without compromising the chart. In the image to the right, for example, if space was limited, the second and fourth labels (ie. 25 and 75) could be removed because the remaining labels are still going up in equal increments and make sense (ie. 0 → 50 → 100).
Note: There may be instances when axis labels can be hidden. For example; when showing a preview of a chart where there is limited real estate, hiding axis labels could be useful to focus on the overview of the chart data instead of being cluttered by truncated axis labels. Use caution when hiding axis labels, as the user may be confused about what the chart data is showing.
