Chart

Use ChartContainer with Recharts when a visual trend helps people compare values over time or across categories.

RevenueOrders

Sample workshop data. A line chart showing revenue from January through May. Values rise overall, with the highest value in May.

Sample revenue by month

Month	Revenue
Jan	18,000
Feb	23,500
Mar	21,200
Apr	28,900
May	31,600

Show codeCopy

Import

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@workshop1/ui/components/chart"

Accessibility

Give the chart an accessible name and a short text summary. Keep the underlying values available in the surrounding UI when the chart communicates more than a simple trend.

Disable animation for data that changes frequently or when respecting reduced motion matters. The example keeps animation off so the chart is stable for every user.

Best practices

• Use the shared chart config so labels and colours stay consistent.
• Keep axes and units clear enough to interpret without hovering.
• Use a table or summary alongside a chart when exact values matter.