```
2. **Reduced motion:**
```css
@media (prefers-reduced-motion: reduce) {
.chart-container * {
animation: none !important;
transition: none !important;
}
}
```
3. **Color independence:** Never rely on color alone to convey meaning. Add:
- Pattern fills or dash styles for line differentiation
- Direct labels or legends with text descriptions
- Shape variation for scatter plots
4. **Screen reader fallback:** Include a hidden data table:
```jsx
Monthly revenue data
{/* Full data in tabular form */}
```
5. **Contrast:** All text on the chart must meet WCAG AA (4.5:1 ratio against `zinc-900`).
## Responsive Behavior
- Charts fill their container width (`responsive: true` / `width="100%"`)
- Set `min-h-[300px]` on the wrapper to prevent CLS
- On mobile (< 640px): move legends below the chart, reduce font sizes
- On print: switch to light theme with black text (via `@media print`)
## Performance
Charts are heavy — always lazy load:
```jsx
import dynamic from 'next/dynamic';
const RevenueChart = dynamic(() => import('@/components/charts/RevenueChart'), {
loading: () => (
),
ssr: false,
});
```
- Never put chart components in the LCP critical path
- Use `ssr: false` — canvas/SVG charts need the DOM
- Skeleton matches the glass container dimensions exactly
## Tooltip Styling
```jsx
const CustomTooltip = ({ active, payload, label }) => {
if (!active || !payload) return null;
return (
{label}
{payload.map((entry, i) => (
● {entry.name}: {entry.value}
))}
);
};
```