Skip to main content
Pricing

Data Visualization

Data visualization patterns help teams compose charts, metrics, and data-heavy interfaces. The goal is clarity: make the right data visible, in the right chart type, at the right scale. Every chart must have a non-visual alternative for accessibility.

Components used

Anatomy

1
Dashboard header — page title + date range selector + export action
2
KPI row — 3–5 Stat Cards or KPI Cards in a horizontal Metric Row
3
Primary chart — full-width Line Chart or Bar Chart with legend and axis labels
4
Secondary grid — 2-column grid of smaller charts (Donut, Horizontal Bar, etc.)
5
Sparklines — inline within table cells or Stat Cards for trend context

Best practices

Chart selection

Line charts for trends over time. Bar charts for comparisons across categories. Donut charts for parts of a whole (max 6 segments). Horizontal bar charts for ranked lists. Stacked bars for composition over time. Funnel charts for conversion flows. Heatmap calendars for activity density.

Colour usage

Use the 9 primitive colour ramps for chart series — never arbitrary hex values. Primary series uses the brand colour (violet-500). Secondary and tertiary series use complementary ramp values. Ensure each colour pair meets 3:1 contrast ratio against the chart background.

Dashboard layout

Start with KPIs at the top — users want the headline numbers first. Place the primary chart directly below, full-width. Use a 2-column grid for secondary charts. Sparklines work inline within cards and tables for supporting context.

Loading states

Use Chart Placeholder (skeleton) while data loads. Show the chart container at the correct height to prevent layout shift. For real-time data, animate transitions smoothly — no jumps.

Annotations

Add reference lines for targets and thresholds. Use tooltips on hover to show exact values. Label significant data points (peaks, drops, anomalies) directly on the chart.

Responsive behaviour

Charts reflow to single column below 768px.
KPI Metric Row wraps to 2×2 or stacks vertically on mobile.
Chart legends move from beside the chart to below it on small screens.
Sparklines remain inline — they are designed for compact contexts.
Data tables provide horizontal scroll as a fallback for chart data.

Accessibility

Every chart must have a visually hidden data table alternative with the same information.
Use role="img" with aria-label describing the chart type, title, and key insight.
Never rely on colour alone to convey meaning — use patterns, labels, or shape in addition to colour.
Provide a text summary of key trends and data points for screen reader users.
Interactive charts support keyboard navigation between data points with arrow keys.
Announce tooltip content to screen readers via aria-live="polite" region.