shadcn-syntax-chart
Installation
SKILL.md
shadcn-syntax-chart
The shadcn Chart primitive is a thin theming and tooltip/legend layer over Recharts. It does NOT replace Recharts. You compose Recharts chart elements as children of ChartContainer, and the shadcn wrappers inject CSS variables (--color-<dataKey>) derived from a ChartConfig object so colors track the active theme (light / dark) without inline hex values.
Install with: npx shadcn@latest add chart. This creates components/ui/chart.tsx plus the dependency recharts in package.json.
Quick Reference
| Wrapper | Source | Role |
|---|---|---|
ChartContainer |
shadcn (custom) | Provides ChartConfig context, injects <style> with --color-<key> CSS vars, wraps Recharts ResponsiveContainer |
ChartTooltip |
re-export of Recharts.Tooltip |
The Recharts tooltip primitive, slotted via content prop |
ChartTooltipContent |
shadcn (custom) | Themed tooltip body. Props: indicator ("dot" | "line" | "dashed"), hideLabel, hideIndicator, labelKey, nameKey, labelFormatter, formatter |
ChartLegend |
re-export of Recharts.Legend |
The Recharts legend primitive, slotted via content prop |
ChartLegendContent |
shadcn (custom) | Themed legend body. Props: nameKey, hideIcon, verticalAlign |
ChartConfig (type) |
shadcn (custom) | Record<string, { label?: ReactNode; icon?: ComponentType } & ({ color?: string } | { theme: { light: string; dark: string } })> |