Charts

The chart gallery has area, bar, line, pie, radar and radial charts plus tooltip variants. They are built on the shadcn/ui chart component, which wraps Recharts and connects it to your theme.

Install a chart

Each chart in the gallery has its own command. For example:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://ui.tealmac.com/r/chart-area-default.json
Copy

The CLI adds the chart file, the chart and card primitives and the recharts package.

Feed it your data

Each chart keeps its data and config at the top of the file. Replace them with yours:

Copyimport { type ChartConfig } from "@/components/ui/chart"
 
const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
]
 
const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

The keys in chartConfig match the keys in your data. ChartContainer turns each entry into a CSS variable (--color-desktop, --color-mobile), which the Recharts elements use:

Copy<Area
  dataKey="desktop"
  fill="var(--color-desktop)"
  stroke="var(--color-desktop)"
/>

Colours follow the theme

Series colours come from --chart-1 to --chart-5. Every theme and preset sets them for light and dark, so charts change with the rest of the UI. To fix a series to a colour, put any CSS colour in its color field, or pass theme: { light, dark } instead.

Accessibility

• Give each chart a heading and a short written summary of what it shows.
• Don't rely on colour alone: use labels, different line styles or patterns when series are close in colour.
• Add Recharts' accessibilityLayer prop to the chart element for keyboard focus and screen reader descriptions.
• Offer the numbers as a table for people who would rather read them.
• Recharts animations respect your own settings; set isAnimationActive={false} when the visitor prefers reduced motion.