Key takeaways
- A good dashboard answers specific questions for a specific user — at a glance.
- Put the most important KPIs top-left, use the right chart for each question, and show context (targets, comparisons, trends).
- Design for speed, mobile, accessibility and both light and dark themes.
Dashboards are among the most common things I build for businesses: sales dashboards, SEO reporting tools, clinic management panels, inventory trackers. The difference between a dashboard people check daily and one they ignore is rarely the data — it’s the design.
Start with questions, not charts#
- Who will use it, and how often (daily operations vs monthly review)?
- What decisions will they make from it?
- What 3–5 numbers matter most?
- What should prompt action (thresholds, alerts)?
Layout principles#
- Top row: key KPIs as stat cards — value, change vs previous period, small trend line.
- Middle: the main trend chart for the primary metric.
- Below: breakdowns (by channel, product, location) and detailed tables.
- Filters (date range, segment) in a consistent place at the top.
- Group related metrics; use white space generously.
Choosing the right chart#
| Question | Chart |
|---|---|
| How has it changed over time? | Line chart |
| How do categories compare? | Horizontal bar chart (sorted) |
| What’s the composition? | Stacked bar; pie only for 2–4 parts |
| Are we on target? | Progress bar or bullet chart |
| What’s the relationship? | Scatter plot |
| Exact values needed | Table with sorting and conditional formatting |
Context makes numbers useful#
- Show comparisons: vs last period, vs same period last year, vs target.
- Use colour meaningfully: green/red only for good/bad, and never colour alone (add arrows or labels for accessibility).
- Label units and time ranges clearly.
- Add short annotations for events (campaign launch, outage).
- Show “last updated” time for live data.
Need a hand with this?
Get a quick, honest review of your website’s SEO.
Performance and technical tips#
- Pre-aggregate data on the server; don’t send millions of rows to the browser.
- Load key KPIs first, heavy charts after (skeleton loaders, not spinners everywhere).
- Cache expensive queries; refresh on a sensible schedule.
- Paginate and virtualise long tables.
- Use mature chart libraries (Recharts, Chart.js, ECharts, Apache Superset for BI).
Mobile and theming#
Stack KPI cards vertically on phones, keep charts simple and swipeable, and support dark mode with CSS variables — see CSS variables and dark mode. Many users check dashboards on their phones between meetings.
Roles and permissions#
Different users need different views: an owner sees revenue, a manager sees team performance, staff see their tasks. Build role-based views and enforce permissions on the server, not just in the UI.
Dashboard design FAQ#
How many charts should a dashboard have?#
As few as needed to answer its main questions — often 4–8 elements on the first screen.
Build custom or use a BI tool?#
BI tools (Looker Studio, Power BI, Metabase) are great for internal analysis. Custom dashboards suit customer-facing products and specific workflows.
Can you build a dashboard for my business?#
Yes — from data sources to design. Tell me what you need to track.