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 data table fallback so screen reader users can access the underlying values directly.

Use Recharts (SVG-based) for typical dashboard charts under 1,000 data points. For datasets over 1,000 points, switch to Chart.js canvas rendering with animation and parsing disabled to avoid SVG performance stalls.

Change chart behavior at breakpoints rather than just scaling size. For example, convert a vertical bar chart to a horizontal bar layout on mobile so category labels stay readable without x-axis crowding.

Use the Okabe-Ito palette (blue, orange, green, vermilion, sky blue) and never rely on color alone as the differentiator. Add dash patterns, shapes, or direct labels so series remain distinguishable without color perception.

Staggered loading happens when each chart fetches its own API endpoint, creating a network waterfall. Fix it by aggregating all dashboard data into a single server-side fetch that returns one payload for all charts to render from.

Avoid pie charts with more than five segments, and never use them for comparisons like team win probabilities — use a horizontal bar chart instead. Pies only work for simple part-to-whole proportions with few categories.