canon-charts

CANON · Charts

A chart is a claim. If the reader can't extract the claim in five seconds, the chart failed regardless of how pretty it is.

Pick the right chart type

Goal	Chart type
Compare categories	Bar chart (horizontal if labels are long)
Show trend over time	Line chart
Show part-of-whole, ≤ 5 slices	Pie or donut (used sparingly)
Show part-of-whole, > 5 slices	Stacked bar or treemap
Show distribution	Histogram, box plot
Show correlation	Scatter plot
Show change across two points	Dumbbell chart, slope chart
Single key metric with trend	Big number + sparkline
Show composition over time	Stacked area

Axis rules

• Y-axis should start at zero for bar charts. Always. Truncating bar axes inflates differences and misleads.
• Line charts may use a non-zero baseline if the data range is narrow and a zero-start would flatten the signal — in that case, explicitly note the baseline.
• X-axis time: left → right, always. Never right → left.
• Label axes clearly. "Revenue ($)" beats "$".
• Tick marks: 4–7 per axis. More = visual noise. Fewer = hard to read.
• Grid lines: light, thin, optional. Full grids often hurt. Horizontal-only grid for vertical bar charts.

Color in charts

Follow canon-color for palette. Chart-specific rules:

• Categorical (qualitative): distinct hues, roughly equal perceptual weight. 5–8 max. Beyond 8, reorganize the data.
• Sequential (ordinal): single-hue light-to-dark. Works for ordered data (low → high).
• Diverging: two hues from neutral midpoint. Use for data with a meaningful zero or center (profit/loss, above/below average).

Avoid rainbow palettes — they imply order where there is none and fail for colorblind users.

Avoid red/green as the only signal. 8% of men are red-green colorblind. Pair with shape or position.

Test palettes against deuteranopia, protanopia, tritanopia simulators.

Labels over legends

If you can label data directly, do it. Legends force the eye back and forth.