Choose a chart to answer a question, not to decorate a panel. Values, comparisons, units, time windows, and uncertainty must remain clear when a chart is hovered, focused, exported, or viewed on a small screen.
Choose an honest encoding
Use lines for change over time and bars for magnitude comparisons. Bar length needs a zero baseline. If a line axis is cropped, label its bounds clearly. Distinguish missing data from zero.
Make comparison explicit
Show the same period and unit for both series. Explain whether a change is relative percent or percentage points. Use line style and labels in addition to color. Put sources and refresh cadence beside the visual.
Provide more than hover
Support keyboard inspection and touch, keep details inside the viewport, and provide a table with equivalent values. Tooltips should overlay the chart without changing card height. Disclose synthetic data and avoid invented confidence.
Default decisions
Starting conventions for this system. Validate them in the context of your product.
- Period
- Explicit start and end dates
- Unit
- Visible beside values or axis
- Comparison
- Labelled series and consistent window
- Alternative
- Accessible data table