Chart

WCAG 2.1 AA — release blocker

Chart must satisfy these on every render before it ships.

Responsive container

• ChartContainer renders a ResponsiveContainer that fills its parent width.
• The chart reflows on resize — no horizontal scrolling.

Color and contrast

• Colors are sourced from the ChartConfig and mapped to CSS custom properties.
• Never rely on color alone to distinguish data series — the legend displays text labels alongside color swatches.
• Ensure a minimum 3:1 contrast between adjacent bars/lines and the chart background.

Tooltips

• ChartTooltip renders on hover/focus and provides exact numerical values for each data point.
• Tooltip content is rendered in the DOM (not canvas) and is readable by screen readers.

Keyboard navigation

Labelling

• Provide descriptive axis labels or an aria-label on the chart container describing what the chart shows.
• When a chart has measurable x/y values, render both axes unless the surrounding UI provides an equivalent text summary.
• For polar charts, render PolarAngleAxis labels and use a bounded PolarRadiusAxis domain so users can understand the scale.
• The legend maps colors to human-readable series names.

Reduced motion

• Recharts animations respect prefers-reduced-motion when isAnimationActive is set appropriately.

Audit checklist

• Chart container is responsive and does not overflow
• Legend labels present for every data series
• Tooltip shows exact values on hover/focus
• 3:1 contrast between data series and background
• Color is not the only differentiator (legend text present)
• Axis labels or aria-label describe chart purpose