Line Chart dataviz-001
Plots data points connected by lines to show trends over continuous intervals (time series). The default choice for showing change over time. Use when the x-axis is ordered (dates, sequential steps).
Reference · UX pattern catalogueData visualisation patterns
43 patterns in this category — each with its illustration, what it is, and the fields that matter when you build or review one. Part of the UX pattern catalogue; the raw, agent-readable version is ux-pattern-catalogue/dataviz-patterns.json.
Chart types
Bar Chart dataviz-002
Uses rectangular bars to compare discrete categories. Research shows bar charts are the easiest chart type for users to interpret accurately (NN/G). Vertical for categories, horizontal when labels are long.
Area Chart dataviz-003
A line chart with the area below filled, emphasizing volume or cumulative totals. Stacked areas show part-to-whole over time. Use when the magnitude matters, not just the trend.
Pie & Donut Chart dataviz-004
Shows part-to-whole relationships as angular slices. Donut variant adds a center metric. Limit to 5-6 slices maximum — research shows users struggle to compare similar angles (NN/G). Always sort by size.
Scatter Plot dataviz-005
Plots individual data points on two axes to reveal correlations, clusters, and outliers. Use when exploring relationships between two quantitative variables. NN/G notes position is a preattentive variable — outliers are spotted instantly.
Heatmap dataviz-006
Uses color intensity on a grid to show magnitude across two categorical dimensions. Common for time-of-day activity, correlation matrices, and geographic density. The eye is drawn to hotspots instantly.
Sparkline dataviz-007
A tiny, word-sized chart (typically a line or bar) embedded inline with text or inside a table cell or KPI card. Invented by Edward Tufte to show trends without axis labels. Shows direction, not precise values.
Gauge / Radial Chart dataviz-008
A semicircular or circular meter showing a single value against a scale. Best for KPIs with known min/max (CPU usage, goal progress, health scores). Limit to one per card — multiple gauges waste space.
Funnel Chart dataviz-009
Shows progressive reduction through sequential stages (conversion funnels, sales pipelines). Each stage is a trapezoid narrower than the previous. Shows both absolute counts and conversion rates between steps.
Treemap dataviz-010
Nested rectangles sized by a quantitative value, showing hierarchical part-to-whole. Good for file system usage, budget allocation, or portfolio composition. Area encoding is less precise than bar length but shows hierarchy well.
Sankey Diagram dataviz-011
Flow diagram where link width is proportional to flow quantity. Shows how values distribute from source to destination (user journeys, budget flows, energy transfers). Reveals leakage and dominant paths.
KPI Card dataviz-012
A single large number with label, trend indicator, and optional sparkline. The most common dashboard element. Shows current value, comparison to previous period, and directional arrow. Place the 3-5 most critical KPIs at the top of any dashboard.
Composition
Dashboard Grid Layout dataviz-013
Arrange charts and KPIs in a responsive grid with consistent card sizing. Place the most important metrics in the top-left (F-pattern scanning). Limit to 5-9 visible widgets to prevent cognitive overload (NN/G).
Dashboard Header with Global Filters dataviz-014
A sticky bar above all dashboard widgets containing date range picker, comparison toggle, and global filters. All charts respond to these shared controls. Prevents per-chart filter confusion.
Chart Card with Header dataviz-015
Each chart wrapped in a card with: title, subtitle/description, optional controls (time range tabs, export), and the chart below. Consistent card structure across all dashboard widgets.
Tabbed Dashboard Views dataviz-016
Organize dashboard sections into tabs (Overview, Revenue, Users, Performance) to manage complexity without scrolling. The Overview tab shows the top 5-7 KPIs; detail tabs show full charts.
Comparison Layout dataviz-017
Side-by-side or overlay chart layout for comparing two periods, segments, or scenarios. "This period vs last period" is the most common comparison. Overlay on same axes when scales match; split when they differ.
Empty Dashboard State dataviz-018
What to show when a dashboard has no data yet — because the user is new, the date range has no activity, or the data source is not connected. Never show blank chart containers.
Interaction
Tooltip on Hover dataviz-019
A floating card showing precise values when hovering over a data point or bar. The primary way users read exact values from charts. Show all series values at the hovered x-position for line/area charts.
Crosshair dataviz-020
A vertical (or cross-shaped) reference line following the cursor across the chart, snapping to the nearest data point. Helps users track position and compare values across multiple line series.
Brush / Range Selection dataviz-021
A draggable range selector below the main chart for zooming into a time window. Shows a miniature overview of the full dataset with handles to select a sub-range. Essential for large time series.
Drill-Down dataviz-022
Clicking a chart element navigates to a more detailed view. Click a bar to see its breakdown, click a time period to zoom in. Progressive disclosure for complex data — overview first, details on demand (Shneiderman's mantra).
Chart Legend dataviz-023
A labeled key mapping colors/patterns to data series. Place below or to the right of the chart. Interactive legends that toggle series visibility are highly valued by users for multi-series charts.
Chart Annotations dataviz-024
Labels, arrows, or highlighted regions on a chart marking notable events (product launches, outages, promotions). Give context to data anomalies that users would otherwise investigate manually.
Chart Export dataviz-025
Allow users to download chart data as CSV/Excel or the chart image as PNG/SVG. Power users need raw data for their own analysis. Place export button in the chart card header.
Accessibility
Data Table Alternative dataviz-026
Every chart must have an equivalent data table that screen reader users can navigate. This is the single most important accessibility requirement for data visualization. Toggle between chart and table view.
Color-Blind Safe Palettes dataviz-027
Use color palettes distinguishable by users with protanopia, deuteranopia, and tritanopia (8% of men, 0.5% of women). Never rely on red/green distinction alone. Test with a color blindness simulator.
Chart Container ARIA dataviz-028
The outermost chart wrapper needs role="img" with an aria-label summarizing what the chart shows. This is the first thing a screen reader announces — it should convey the chart type, subject, and key insight.
Keyboard-Navigable Data Points dataviz-029
Make individual data points focusable and navigable with arrow keys. On focus, show the tooltip with the point's value. Essential for users who cannot use a mouse to hover over chart elements.
High Contrast Mode dataviz-030
A toggle or automatic detection that increases chart contrast: thicker lines, larger labels, stronger fill colors, and pattern fills replacing solid colors. Essential for low-vision users.
Sonification dataviz-031
Represent data as sound — pitch maps to value, left-to-right panning maps to time. An experimental but powerful alternative for blind users to perceive trends, outliers, and patterns in charts without vision.
Real time
Live-Updating Chart dataviz-032
A chart that receives new data points via WebSocket or SSE and appends them in real-time. Common for monitoring dashboards (server metrics, stock prices, IoT sensors). New points slide in from the right.
Threshold Alerts dataviz-033
Horizontal reference lines on charts indicating warning and critical thresholds. When values cross a threshold, visually highlight the violation with color change and optional animation. Essential for monitoring dashboards.
Auto-Refresh with Indicator dataviz-034
Dashboard data refreshes on a timer (every 30s, 1m, 5m) with a visible countdown or "last updated" timestamp. Users must know when data is stale. Provide manual refresh and auto-refresh toggle.
Streaming Data Buffer dataviz-035
Buffer incoming data points and render in batches to prevent jank from high-frequency updates. If data arrives at 100 Hz, batch into 1-2 Hz visual updates. Preserves all data for analysis while keeping the UI smooth.
Time Window Selector dataviz-036
Quick-select buttons for common time ranges: "1h", "6h", "24h", "7d", "30d", "Custom". The primary navigation for time-series dashboards. Active range highlighted. Affects all charts on the dashboard.
Sparkline in Table Cell dataviz-037
Tiny inline charts inside data table cells showing the trend for each row's metric. Combines tabular precision with visual trend context. Common in financial dashboards, server monitoring, and analytics tables.
Responsive
Responsive Chart Container dataviz-038
Charts must resize fluidly with their container. Use a responsive wrapper that recalculates dimensions on resize. Never set fixed pixel widths on charts — they will overflow or leave whitespace on different screens.
Axis Label Rotation dataviz-039
Rotate x-axis labels 45 or 90 degrees when they overlap at smaller widths. The fallback for long category labels in bar and line charts. Prefer horizontal labels when space permits — rotated text is harder to read.
Mobile Chart Simplification dataviz-040
On mobile, reduce chart complexity: fewer data points, simplified axes, larger touch targets, horizontal scroll for wide charts. Mobile users need trends, not precision — prioritize the story over the detail.
Chart Skeleton Loading dataviz-041
Show a placeholder skeleton matching the chart shape while data loads. Prevents layout shift and communicates that content is coming. Better than a spinner because it preserves the spatial context.
Stacked-to-Scrollable Layout dataviz-042
On desktop, show multiple charts side by side in a grid. On mobile, either stack vertically (for few charts) or use a horizontal scroll carousel (for many charts). Prevents tiny, unreadable charts on narrow screens.
Print-Optimized Charts dataviz-043
Charts rendered for @media print: high contrast, no interactive elements, visible data labels, expanded legends, and appropriate sizing. Users print dashboards for meetings and reports.