data-visualization-architect

Wrap the chart in a figure element with aria-labelledby and aria-describedby pointing to a visually hidden title and insight summary. Add a toggleable HTML data table fallback so screen reader users can access the exact values behind the visualization.

Use a line chart for continuous trends like monthly VAT output, and avoid bar charts for continuous time series. For composition over time use stacked area with at most five stacks, and never use pie charts for comparisons.

Recharts renders SVG and stalls beyond roughly 1,000 data points, so switch to Chart.js with canvas rendering for high-volume data. Disable animation and parsing and enable the normalized flag in Chart.js for best performance.

Use the Okabe-Ito palette and never rely on color alone as the differentiator. Add dash patterns, shapes, or direct labels as secondary encodings, and ensure chart elements meet 3:1 WCAG contrast for UI components.

Fetching each chart's data with separate client-side calls causes staggered pop-in. Instead aggregate all dashboard data into one server-side fetch that returns a single payload, then render every chart from memory.

Charts should change behavior, not just shrink. Convert vertical bar charts to horizontal layouts below the mobile breakpoint so category labels stay readable, and reduce chart height to fit smaller viewports.