Chart Design Principles
Design every chart to be focused (one clear message), approachable (context before complexity), and accessible (works for all users).
Chart Type Selection
| Type | Best For | Key Strength |
|---|---|---|
| Bars | Comparisons, rankings, categories | Shows zeros clearly; most flexible |
| Lines | Trends, rates of change, time series | Reveals patterns and inflection points |
| Points | Correlations, outliers, clusters | Identifies relationships and anomalies |
Default to bars when uncertain. Reserve novel chart types for central features only.
Essential Elements
Title: States what the chart shows (not how to read it) Summary stat: The key takeaway as a number ("Total: 1,234" or "Up 12%") Axis labels: Use intuitive intervals (multiples of 10, 20, 25—never 17 or 23)
Axis Ranges
- •Fixed: When data has natural bounds (battery: 0-100%, satisfaction: 1-5)
- •Dynamic: When no meaningful maximum exists (revenue, page views, steps)
Color Rules
- •Never rely on color alone—pair with symbols, patterns, or labels
- •Limit palette—2-4 distinct colors maximum; one dominant, rest subordinate
- •Cultural awareness—red/green meanings vary; avoid for good/bad without symbols
- •Balance visual weight—equal saturation across categories unless hierarchy intended
- •Test accessibility—verify contrast ratios; check with colorblind simulation
Progressive Disclosure
Match chart complexity to context:
| Context | Approach |
|---|---|
| Dashboard widget | Sparkline or mini-chart; no axes; click to expand |
| Report section | Full axes and labels; summary in title; hover for details |
| Deep analysis | Multiple perspectives; filters; drill-down capability |
Multi-Chart Systems
When showing multiple charts together:
- •Use consistent colors for the same data across charts
- •Vary chart type to signal different data (bars → lines = different measure)
- •Maintain visual continuity when expanding from preview to detail
Quick Checklist
Before finalising any chart:
- • One clear message (not three insights crammed together)
- • Title + summary stat present
- • Color not sole differentiator
- • Axis labels at intuitive intervals
- • High contrast between marks and background