Chart

Chart Selection

Use BarChart for comparing discrete categories, LineChart for continuous trends over time, AreaChart for cumulative or stacked volumes, and PieChart for part-to-whole relationships with fewer than 6 segments. Avoid pie charts for more than 6 categories; switch to a horizontal bar chart instead.

Color & Theming

Always use semantic CSS variables (var(--chart-1) through var(--chart-5)) rather than hardcoded hex or OKLCH values. The ChartContainer injects scoped --color-* variables from your config, ensuring consistent theming in light and dark modes. Limit data series to 5 colors to maintain visual clarity.

Responsive Behavior

ChartContainer uses ResponsiveContainer internally, so charts automatically fill their parent width. Always set a fixed height via className="h-[200px]". On small screens, consider hiding axis labels or switching to horizontal bar layouts for better readability.

Data Density & Readability

Use CartesianGrid vertical={false} to reduce visual noise. Abbreviate long axis labels with tickFormatter (e.g., month names to 3 characters). Add tooltips for precise values on hover, and include legends when displaying more than one data series.

Keyboard Navigation

• Tab — Move focus into the chart container
• Arrow Left / Arrow Right — Navigate between data points when accessibilityLayer is enabled
• Enter or Space — Activate tooltip for the focused data point
• Escape — Dismiss active tooltip and return focus to the chart

Screen Reader Support

• Add accessibilityLayer prop to all chart components for ARIA role announcements
• Use descriptive label values in ChartConfig so screen readers announce meaningful series names
• Wrap charts in a <figure> with a <figcaption> for additional context
• Provide a text summary or data table alternative for complex charts

Color Independence

Never rely on color alone to distinguish data series. Always include legends with text labels, use distinct patterns or shapes where possible, and ensure tooltips display the series name. The ChartLegendContent component pairs color swatches with text labels to support colorblind users.

Touch Targets

Tooltips activate on both hover and touch. Set adequate bar width or dot radius so touch targets meet the minimum 44x44px recommendation. For pie charts, use paddingAngle to create visible gaps between segments, making them easier to tap on mobile devices.

ARIA Attributes

{/* Enable keyboard navigation with accessibilityLayer */}
<BarChart accessibilityLayer data={chartData}>
  {/* ... */}
</BarChart>

{/* Meaningful labels in config for screen readers */}
const chartConfig = {
  desktop: { label: "Desktop Visitors" },
  mobile: { label: "Mobile Visitors" },
} satisfies ChartConfig

{/* Wrap chart in a figure with caption */}
<figure role="figure" aria-label="Visitor statistics chart">
  <ChartContainer config={chartConfig} className="h-[200px] w-full">
    <BarChart accessibilityLayer data={chartData}>
      {/* ... */}
    </BarChart>
  </ChartContainer>
  <figcaption className="sr-only">
    Bar chart showing desktop and mobile visitors from January to June
  </figcaption>
</figure>