Comparative Analysis Dashboard
Also called: Period-over-period dashboard, Benchmark dashboard, Side-by-side comparison view
Every number has a partner: solid cobalt for this period, hatched slate for the last, an amber “vs” between them and a ▲▼ delta badge on everything.
Design keywords
Say these words to ask for this style.
A comparative dashboard answers one question everywhere: better or worse than before? The page opens with a comparison lens — period A vs period B — and every widget is drawn as a pair. The current period is solid cobalt; the comparison period is the same shape in hatched slate, so the eye reads “ghost vs real” without a legend. Grouped bars, dumbbell plots and two-line trends replace single-series charts, and each figure carries a pill-shaped delta badge in green or red. Surfaces stay calm and white so the paired colours do the talking.
Best for
- Term-over-term or year-over-year reporting
- A/B tests and campaign comparisons
- Benchmarking branches, schools or teams
- Monthly business reviews
Avoid for
- Real-time operations with no meaningful baseline
- Consumer apps where one number is enough
- Forecast-heavy planning (use predictive views)
✓ Do
- Encode the comparison period as the same mark in a hatched or lighter variant, never a different hue family
- Put a signed delta badge (▲ +5.2 pts / ▼ −18) next to every headline number
- Lock both periods to the same axis and scale
✕ Don't
- Don’t compare two different chart types — pair like with like
- Don’t show a delta without saying what it is compared to
- Don’t use more than two periods in one widget
Not to be confused with
On mobile
Keep the A vs B period chip pinned under the app bar; show each metric as a card with the current value, the previous value in muted text and a delta pill. Paired bars become two thin stacked bars (solid over hatched) that fit a 350px width.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.