1# shadcn/ui - Charts Component Reference
2 
3Built on **Recharts** with consistent theming and styling.
4 
5## Installation
6 
7```bash
8npx shadcn@latest add chart
9```
10 
11## CSS Variables for Charts
12 
13Add to `globals.css`:
14 
15```css
16@layer base {
17  :root {
18    --chart-1: oklch(0.646 0.222 41.116);
19    --chart-2: oklch(0.6 0.118 184.704);
20    --chart-3: oklch(0.546 0.198 38.228);
21    --chart-4: oklch(0.596 0.151 343.253);
22    --chart-5: oklch(0.546 0.158 49.157);
23  }
24  .dark {
25    --chart-1: oklch(0.488 0.243 264.376);
26    --chart-2: oklch(0.696 0.17 162.48);
27    --chart-3: oklch(0.698 0.141 24.311);
28    --chart-4: oklch(0.676 0.172 171.196);
29    --chart-5: oklch(0.578 0.192 302.85);
30  }
31}
32```
33 
34## ChartConfig and ChartContainer
35 
36`ChartContainer` wraps your Recharts component and accepts a `config` prop for theming.
37 
38```tsx
39import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
40import { ChartContainer, ChartTooltipContent } from "@/components/ui/chart"
41 
42const chartConfig = {
43  desktop: { label: "Desktop", color: "var(--chart-1)" },
44  mobile: { label: "Mobile", color: "var(--chart-2)" },
45} satisfies import("@/components/ui/chart").ChartConfig
46 
47const chartData = [
48  { month: "January", desktop: 186, mobile: 80 },
49  { month: "February", desktop: 305, mobile: 200 },
50  { month: "March", desktop: 237, mobile: 120 },
51]
52 
53export function BarChartDemo() {
54  return (
55    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
56      <BarChart data={chartData}>
57        <CartesianGrid vertical={false} />
58        <XAxis dataKey="month" tickLine={false} axisLine={false}
59          tickFormatter={(value) => value.slice(0, 3)} />
60        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
61        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
62        <ChartTooltip content={<ChartTooltipContent />} />
63      </BarChart>
64    </ChartContainer>
65  )
66}
67```
68 
69## Custom Colors in ChartConfig
70 
71```tsx
72const chartConfig = {
73  visitors: {
74    label: "Visitors",
75    color: "#2563eb",
76    theme: {
77      light: "#2563eb",
78      dark: "#60a5fa",
79    },
80  },
81  sales: {
82    label: "Sales",
83    color: "var(--chart-1)",
84    theme: {
85      light: "oklch(0.646 0.222 41.116)",
86      dark: "oklch(0.696 0.182 281.41)",
87    },
88  },
89} satisfies import("@/components/ui/chart").ChartConfig
90```
91 
92## Line Chart
93 
94```tsx
95import { Line, LineChart, CartesianGrid, XAxis, YAxis } from "recharts"
96import { ChartContainer, ChartTooltipContent } from "@/components/ui/chart"
97 
98const chartConfig = {
99  price: { label: "Price", color: "var(--chart-1)" },
100} satisfies import("@/components/ui/chart").ChartConfig
101 
102export function LineChartDemo() {
103  return (
104    <ChartContainer config={chartConfig} className="min-h-[200px]">
105      <LineChart data={chartData}>
106        <CartesianGrid vertical={false} />
107        <XAxis dataKey="month" tickLine={false} axisLine={false} />
108        <YAxis tickLine={false} axisLine={false} tickFormatter={(v) => `$${v}`} />
109        <Line dataKey="price" stroke="var(--color-price)" strokeWidth={2} dot={false} />
110        <ChartTooltip content={<ChartTooltipContent />} />
111      </LineChart>
112    </ChartContainer>
113  )
114}
115```
116 
117## Area Chart
118 
119```tsx
120import { Area, AreaChart, XAxis, YAxis } from "recharts"
121import {
122  ChartContainer, ChartLegend, ChartLegendContent, ChartTooltipContent,
123} from "@/components/ui/chart"
124 
125const chartConfig = {
126  desktop: { label: "Desktop", color: "var(--chart-1)" },
127  mobile: { label: "Mobile", color: "var(--chart-2)" },
128} satisfies import("@/components/ui/chart").ChartConfig
129 
130export function AreaChartDemo() {
131  return (
132    <ChartContainer config={chartConfig} className="min-h-[200px]">
133      <AreaChart data={chartData}>
134        <XAxis dataKey="month" tickLine={false} axisLine={false} />
135        <YAxis tickLine={false} axisLine={false} />
136        <Area dataKey="desktop" fill="var(--color-desktop)" stroke="var(--color-desktop)" fillOpacity={0.3} />
137        <Area dataKey="mobile" fill="var(--color-mobile)" stroke="var(--color-mobile)" fillOpacity={0.3} />
138        <ChartTooltip content={<ChartTooltipContent />} />
139        <ChartLegend content={<ChartLegendContent />} />
140      </AreaChart>
141    </ChartContainer>
142  )
143}
144```
145 
146## Pie Chart
147 
148```tsx
149import { Pie, PieChart } from "recharts"
150import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltipContent } from "@/components/ui/chart"
151 
152const chartConfig = {
153  chrome: { label: "Chrome", color: "var(--chart-1)" },
154  safari: { label: "Safari", color: "var(--chart-2)" },
155  firefox: { label: "Firefox", color: "var(--chart-3)" },
156} satisfies import("@/components/ui/chart").ChartConfig
157 
158const pieData = [
159  { browser: "Chrome", visitors: 275, fill: "var(--color-chrome)" },
160  { browser: "Safari", visitors: 200, fill: "var(--color-safari)" },
161  { browser: "Firefox", visitors: 187, fill: "var(--color-firefox)" },
162]
163 
164export function PieChartDemo() {
165  return (
166    <ChartContainer config={chartConfig} className="min-h-[200px]">
167      <PieChart>
168        <Pie data={pieData} dataKey="visitors" nameKey="browser" cx="50%" cy="50%" outerRadius={80} />
169        <ChartTooltip content={<ChartTooltipContent />} />
170        <ChartLegend content={<ChartLegendContent />} />
171      </PieChart>
172    </ChartContainer>
173  )
174}
175```
176 
177## ChartTooltipContent Props
178 
179| Prop | Type | Default | Description |
180|------|------|---------|-------------|
181| `labelKey` | string | "label" | Key for tooltip label |
182| `nameKey` | string | "name" | Key for tooltip name |
183| `indicator` | "dot" \| "line" \| "dashed" | "dot" | Indicator style |
184| `hideLabel` | boolean | false | Hide label |
185| `hideIndicator` | boolean | false | Hide indicator |
186 
187## Accessibility
188 
189Enable keyboard navigation and screen reader support:
190 
191```tsx
192<BarChart accessibilityLayer data={chartData}>...</BarChart>
193```
194 
195This adds keyboard arrow key navigation, ARIA labels, and screen reader announcements.
196