Axes
Axes help the user understand the 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.
Horizontal vs Vertical Gridlines
Reduce unnecessary chart structure while preserving readability, comparison, and accessibility. Don’t remove chart gridlines entirely unless that makes sense. The goal is to use the minimum structure needed for users to understand the data quickly.
1. Core Rule
Use one gridline direction by default. In most charts, use either:
- Horizontal gridlines to support value comparison
- Vertical gridlines to support category/time alignment
Avoid using both horizontal and vertical gridlines unless the user genuinely needs to compare values across both axes.
Use one gridline direction by default
Don’t remove gridlines when users need them for accurate comparison
Use vertical gridlines for time/category alignment only when needed
Don’t use vertical gridlines just because the X-axis is time-based
Prioritize the axis that supports the user’s main task
Don’t use both chart grids unless the chart requires precise coordinate reading
2. Recommended Default
Use horizontal gridlines by default when the Y-axis is value-based
This is the most common case for dashboards and analytics. Use horizontal gridlines when users need to compare:
- Values
- Volumes
- Percentages
- Counts
- Scores
- Rates
- Performance over time
Example
For a line chart where:
- X-axis = time
- Y-axis = value
Use horizontal value gridlines only. Users usually need to estimate the value of a point or trend against the Y-axis. The time axis can often be understood through labels, ticks, or tooltips without vertical gridlines.
3. When to Use Vertical Gridlines
Use vertical gridlines only when X-axis alignment is more important than value estimation. Vertical gridlines may be useful when:
- The X-axis contains discrete categories
- Users need to compare events across time intervals
- Precise time-window alignment matters
- There are annotations, thresholds, or event markers tied to dates/times
- The chart supports operational planning or scheduling
- The chart uses dense multi-series data where users must trace exact positions across the X-axis
Example
Use vertical gridlines when users need to answer:
“What happened during this exact time period?”
rather than:
“What value did this data point reach?”
4. When Both Horizontal and Vertical Gridlines Are Acceptable
Using both directions is acceptable when both axes need precise visual alignment. This may apply to:
- Complex line charts
- Forecasting charts
- Operational analytics
- Scheduling or planning views
- Dense multi-series comparisons
- Charts with important events or thresholds on both axes
- Charts where users need to estimate both when and how much
It is acceptable when
- The chart supports dense analysis or operational decision-making
- Users need precise alignment on both axes
- Removing one direction causes measurable confusion
Use both only when removing one direction would make the chart materially harder to read.
Titles and Labels
All charts with axes should have titles and labels. Titles and labels help orient 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 axis 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 axis 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 number 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.
