Axes and labels

Axes set the scale every value is read against. Keep them truthful, light and easy to read.

Baselines

Whether an axis must start at zero depends on what the mark encodes.

  • Bars and areas start at zero. They encode a value as length or filled height, so a cropped axis makes a 5% difference look like a 50% one.
  • Lines and scatter plots may crop. They encode position, so a range that fits the data shows the change. Label the axis clearly so the reader sees where it starts.
  • Compared charts share a scale. Two charts side by side with different ranges invite a wrong comparison. Give them the same domain, or say clearly that they differ.

Missing data

A gap in the data is information.

Never draw a line across missing values. Leave a gap in the line, and say what is missing in the subtitle or an annotation. A line through a gap tells the reader a value exists where none was recorded. Treat missing as missing, not as zero.

Ticks and gridlines

Enough to read values against, not so many that they compete with the data.

  • Use constant increments (0, 25, 50, 75, 100) on round numbers.
  • Aim for 6 to 10 gridlines on a wide chart and 3 to 6 on a narrow one. Reduce the tick count as the chart gets narrower.
  • Keep gridlines light and behind the marks, on the value axis only. The kit draws them in the chart grid color, which follows the theme. See Chart chrome.

Orientation

Put time across and long names down.

Time runs along the horizontal axis, left to right (right to left in a right-to-left layout).

When category names are long, switch to horizontal bars so the labels sit on the vertical axis and read normally. Do not rotate labels: rotated text is slow to read and still overlaps.

Numbers
Format tick labels with the reader's locale, for example with Intl.NumberFormat, so separators and compact suffixes match their language.

Dates

Short, localized, and without repeating what the reader already knows.

  • Format dates in the reader's locale, for example with Intl.DateTimeFormat.
  • Show the year once, at the first tick and at each boundary where it changes: Jan 2026, Feb, Mar, and so on.
  • Match the tick unit to the data: days for a month of data, months for a year.

Log scales

For data that spans several orders of magnitude, and for readers who expect one.

A log scale shows rates of change and keeps small values visible next to large ones. Many readers misread it as linear, so use it only for an audience that works with log scales, and label it: "Cases (log scale)". Never draw bars on a log axis, since they have no zero to start from.

Dual axes

Two scales on one chart let you draw any relationship you like.

Use a second vertical axis only when both scales are synchronized (the same zero, and gridlines that line up) and each axis is labeled with its series and unit. Otherwise draw two charts, one above the other, sharing the horizontal axis. See Choosing a chart for the alternatives.