Dashboard Patterns
Patterns for dashboard charts, layouts, and controls.
74 patterns · 9 groups
Key measures 7
Show important values with the comparisons and context people need to understand them.
People need to see how much a value changed and what it was compared with.
change badge · trend arrow · vs-previous KPI tilePeople need to check a key value and understand whether it needs attention.
stat card · big number · BAN · metric card Percentile summaryPeople need to see slower experiences that an average can hide.
p50/p95/p99 · latency percentiles · tail latency Ranked listPeople need to find the items contributing most to a result.
top-N · leaderboard · toplist Ratio and ratePeople need to judge a count in relation to overall volume or time.
percent-of · per-unit · normalized metric SparklinePeople need a compact view of recent changes beside a value.
inline trend · micro-chart · word-sized graphic Target and progressPeople need to see how far they are from a goal and whether they are on pace.
bullet graph · goal bar · quota barLabels and context 6
Explain what the data means, where it comes from, and when it was updated.
People need to compare changes in a chart with events that may help explain them.
event marker · deploy marker · note on chart Data source badgePeople need to know where a panel’s data comes from and whether that source is working.
provenance · connector health Explain this metricPeople need a shared definition of what a metric counts.
definition tooltip · metric glossary Freshness indicatorPeople need to know how old the data is before acting on it.
last updated · stale-data warning · live pulse Legend and series togglePeople need to identify chart series and isolate the ones they want to compare.
toggleable legend · multi-toggle KPI header Time-range pickerPeople need to choose the period a dashboard shows and see that choice clearly.
date range · relative time · quick rangesCharts and data displays 22
Choose a way to show the data that fits the question people need to answer.
People need to distinguish unusual changes from a metric’s normal ups and downs.
expected range · forecast band · confidence ribbon · seasonal baseline Bed map and track boardStaff need to see bed availability and what each patient is waiting for in one place.
census board · ED whiteboard · patient tracking board Calendar heatmapPeople need to spot recurring patterns and gaps in daily activity.
contribution graph · punch card · day grid Cohort gridPeople need to compare how groups return over time after joining.
retention grid · triangle chart · cohort table Data tablePeople need to scan, sort, and compare exact values for many items.
metrics table · sortable grid FunnelPeople need to see where participants leave a sequence of steps.
conversion funnel · step drop-off Gauge and dialPeople need to see where a value sits within a known range.
radial gauge · speedometer · dial Geo map with markersPeople need to see how values and conditions vary by location.
map panel · choropleth · geospatial view HeatmapPeople need to see how a large set of values is distributed over time.
density heatmap · latency heatmap · BubbleUp Histogram and distributionPeople need to see how values are spread out rather than relying on an average.
distribution chart · bucketed bar Host mapPeople need to spot unusual machines within a large fleet.
hexagon map · fleet grid · infrastructure map Log tailPeople need to inspect individual events as they arrive.
live tail · log stream Order book and depthPeople need to see the buy and sell quantities currently listed at each price.
market depth · level 2 · DOM Process mimicOperators need to see live values alongside the equipment and connections they describe.
mimic diagram · P&ID display · SCADA schematic Sankey and pathPeople need to see how quantities split and move through different routes.
flow diagram · user path · alluvial Service mapPeople need to see service dependencies and locate problems among them.
dependency graph · topology view · service graph Small multiplesPeople need to compare separate charts using the same scales and layout.
trellis · faceted charts · panel series Stacked compositionPeople need to see how individual parts contribute to a changing total.
stacked area · stacked bar · part-to-whole Status historyPeople need to see when a state changed and how long it lasted.
state timeline · uptime bar · availability strip Threshold line and regionPeople need a visible limit to judge the values on a chart.
SLO line · alert threshold · alarm limit Time seriesPeople need to see how a value changed over time and when a change began.
line chart · area chart · trend chart Trace waterfallPeople need to see where time was spent within a single request.
span waterfall · distributed trace · flame chartInteraction 8
Help people explore the data and return to views they use often.
People need to compare periods to judge whether a change is unusual.
period over period · year over year · time shift Cross-filterPeople need to select data in one panel and inspect the same records in other panels.
brushing and linking · click to filter · coordinated views Drill-downPeople need to move from a summary to the records behind it while keeping their filters and time range.
click through · expand to detail · navigate to scope Hover detailPeople need exact values for a point without leaving the chart.
tooltip · crosshair · shared crosshair Saved viewPeople need to return to useful settings without recreating them each time.
bookmark · saved search · personal dashboard Search across panelsPeople need to find a panel or dashboard without knowing where it is stored.
global search · find a metric · command palette Template variablePeople need to use one dashboard for different services, hosts, or environments.
dashboard variable · global filter · environment switcher · scoped dashboard Zoom and pan on timePeople need to focus on a brief event and explore the surrounding time period.
drag to zoom · range brush · time navigationManaging screen space 6
Keep dashboards useful when content grows or the screen size changes.
People need a clear summary with less-used panels available when needed.
panel group · section accordion Detail on demandPeople need a closer look at one panel without losing their place in the dashboard.
expand panel · full-screen panel · side panel Mobile adaptationPeople need to check important dashboard information on a phone.
stacked cards · swipe between panels Multi-page dashboardPeople need separate views when a dashboard covers too many questions for one page.
tabs · sub-dashboards · dashboard set Panel gridPeople need a clear arrangement of panels with enough space to read each one.
widget grid · tile layout · dashboard canvas Wallboard modePeople need to read a shared dashboard from a distance without interacting with it.
kiosk mode · TV mode · rotationOrganization and navigation 4
Group related information and give people clear paths from summaries to details.
People need to move from a broad overview to specific details without losing context.
landing overview · hierarchical navigation · fleet-to-node Semantic groupingPeople need related panels grouped together so they can find and compare them.
grouped by service · grouped by team Sidebar and canvasPeople need to navigate between dashboards while keeping space for the data.
nav rail plus dashboard · tree plus summary Tabs as genresPeople need distinct views for the different questions they ask of the same data.
Overview / Content / Audience / RevenuePage layout 5
Arrange panels so people know where to start and can compare related information.
Experienced users need to compare many related charts at once.
Node Exporter style · wall of charts Header KPI stripPeople need a quick summary of the measures that require attention.
top-row summary · hero metrics · summary row Resizable card gridPeople need to arrange shared dashboard panels to suit their own work.
draggable widgets · customizable layout Single-column narrativeOccasional readers need a clear path through a dashboard’s main findings.
one-screen dashboard · Plausible style Two-pane list and detailPeople need to inspect items in a queue without losing their place in the list.
issue list plus detail · master-detailColor 6
Use color to distinguish categories, compare values, and highlight warnings.
People need to tell chart series apart and recognize them across views.
series colors · qualitative palette Dark-first data palettePeople need chart colors that remain readable on dark backgrounds.
dark mode charts · NOC palette Grayscale with alertsPeople need warnings to stand out from routine information.
ISA-101 · muted-until-abnormal · high-performance HMI Red/green direction coloringPeople need to recognize upward and downward changes without relying on color alone.
tick coloring · gain/loss color Semantic status colorPeople need consistent status cues to spot items requiring attention.
good/warn/critical · severity scale · RAG Sequential and diverging scalesPeople need color scales that clearly show value differences and meaningful reference points.
heat scale · color rampDashboard features 10
Support filtering, sharing, and alerts, and explain when data is loading or unavailable.
People need a notification when a metric requires attention.
threshold alert · monitor from chart Auto-insightPeople need help finding important changes across more data than they can inspect themselves.
generated narrative · watchdog · anomaly feed Comment and annotateTeams need to discuss specific chart data and keep their findings attached to it.
collaborative notes · panel comments Dashboard builderPeople need to build dashboards for their own questions without relying on someone else for every change.
add panel · edit mode · layout editor Empty statePeople need to know why a panel is empty and what to do next.
no data yet · no results · zero state Error and stale statePeople need to distinguish valid results from missing, failed, or outdated data.
data source down · partial data · degraded panel Filter barPeople need to narrow the data and see which filters are active.
facet bar · query bar · filter chips Loading and skeleton statePeople need to know that data is still loading rather than missing or unavailable.
skeleton · shimmer · placeholder panel Metric targetsTeams need an agreed goal that stays consistent across dashboards and alerts.
set a goal · target line Share and embedPeople need to share a dashboard while preserving the context needed to understand it.
public link · snapshot · iframe embed · scheduled export
For AI tools: llms.txt. Each pattern is also available
as Markdown at /dashboards/<slug>.md.