1### shadcn/ui Chart Component - Installation
2 
3Source: https://ui.shadcn.com/docs/components/chart
4 
5The chart component in shadcn/ui is built on Recharts, providing direct access to all Recharts capabilities with consistent theming.
6 
7```bash
8npx shadcn@latest add chart
9```
10 
11--------------------------------
12 
13### shadcn/ui Chart Component - Basic Usage
14 
15Source: https://ui.shadcn.com/docs/components/chart
16 
17The ChartContainer wraps your Recharts component and accepts a config prop for theming. Requires `min-h-[value]` for responsiveness.
18 
19```tsx
20import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
21import { ChartContainer, ChartTooltipContent } from "@/components/ui/chart"
22 
23const chartConfig = {
24  desktop: {
25    label: "Desktop",
26    color: "var(--chart-1)",
27  },
28  mobile: {
29    label: "Mobile",
30    color: "var(--chart-2)",
31  },
32} satisfies import("@/components/ui/chart").ChartConfig
33 
34const chartData = [
35  { month: "January", desktop: 186, mobile: 80 },
36  { month: "February", desktop: 305, mobile: 200 },
37  { month: "March", desktop: 237, mobile: 120 },
38]
39 
40export function BarChartDemo() {
41  return (
42    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
43      <BarChart data={chartData}>
44        <CartesianGrid vertical={false} />
45        <XAxis dataKey="month" tickLine={false} axisLine={false} />
46        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
47        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
48        <ChartTooltip content={<ChartTooltipContent />} />
49      </BarChart>
50    </ChartContainer>
51  )
52}
53```
54 
55--------------------------------
56 
57### shadcn/ui Chart Component - ChartConfig with Custom Colors
58 
59Source: https://ui.shadcn.com/docs/components/chart
60 
61You can define custom colors directly in the configuration using hex values or CSS variables.
62 
63```tsx
64const chartConfig = {
65  desktop: {
66    label: "Desktop",
67    color: "#2563eb",
68    theme: {
69      light: "#2563eb",
70      dark: "#60a5fa",
71    },
72  },
73  mobile: {
74    label: "Mobile",
75    color: "var(--chart-2)",
76  },
77} satisfies import("@/components/ui/chart").ChartConfig
78```
79 
80--------------------------------
81 
82### shadcn/ui Chart Component - CSS Variables
83 
84Source: https://ui.shadcn.com/docs/components/chart
85 
86Add chart color variables to your globals.css for consistent theming.
87 
88```css
89:root {
90  /* Chart colors */
91  --chart-1: oklch(0.646 0.222 41.116);
92  --chart-2: oklch(0.6 0.118 184.704);
93  --chart-3: oklch(0.546 0.198 38.228);
94  --chart-4: oklch(0.596 0.151 343.253);
95  --chart-5: oklch(0.546 0.158 49.157);
96}
97 
98.dark {
99  --chart-1: oklch(0.488 0.243 264.376);
100  --chart-2: oklch(0.696 0.17 162.48);
101  --chart-3: oklch(0.698 0.141 24.311);
102  --chart-4: oklch(0.676 0.172 171.196);
103  --chart-5: oklch(0.578 0.192 302.85);
104}
105```
106 
107--------------------------------
108 
109### shadcn/ui Chart Component - Line Chart Example
110 
111Source: https://ui.shadcn.com/docs/components/chart
112 
113Creating a line chart with shadcn/ui charts component.
114 
115```tsx
116import { Line, LineChart, CartesianGrid, XAxis, YAxis } from "recharts"
117import { ChartContainer, ChartTooltipContent } from "@/components/ui/chart"
118 
119const chartConfig = {
120  price: {
121    label: "Price",
122    color: "var(--chart-1)",
123  },
124} satisfies import("@/components/ui/chart").ChartConfig
125 
126const chartData = [
127  { month: "January", price: 186 },
128  { month: "February", price: 305 },
129  { month: "March", price: 237 },
130  { month: "April", price: 203 },
131  { month: "May", price: 276 },
132]
133 
134export function LineChartDemo() {
135  return (
136    <ChartContainer config={chartConfig} className="min-h-[200px]">
137      <LineChart data={chartData}>
138        <CartesianGrid vertical={false} />
139        <XAxis dataKey="month" tickLine={false} axisLine={false} />
140        <YAxis tickLine={false} axisLine={false} tickFormatter={(value) => `$${value}`} />
141        <Line
142          dataKey="price"
143          stroke="var(--color-price)"
144          strokeWidth={2}
145          dot={false}
146        />
147        <ChartTooltip content={<ChartTooltipContent />} />
148      </LineChart>
149    </ChartContainer>
150  )
151}
152```
153 
154--------------------------------
155 
156### shadcn/ui Chart Component - Area Chart Example
157 
158Source: https://ui.shadcn.com/docs/components/chart
159 
160Creating an area chart with gradient fill and legend.
161 
162```tsx
163import { Area, AreaChart, XAxis, YAxis } from "recharts"
164import {
165  ChartContainer,
166  ChartLegend,
167  ChartLegendContent,
168  ChartTooltipContent,
169} from "@/components/ui/chart"
170 
171const chartConfig = {
172  desktop: { label: "Desktop", color: "var(--chart-1)" },
173  mobile: { label: "Mobile", color: "var(--chart-2)" },
174} satisfies import("@/components/ui/chart").ChartConfig
175 
176export function AreaChartDemo() {
177  return (
178    <ChartContainer config={chartConfig} className="min-h-[200px]">
179      <AreaChart data={chartData}>
180        <XAxis dataKey="month" tickLine={false} axisLine={false} />
181        <YAxis tickLine={false} axisLine={false} />
182        <Area
183          dataKey="desktop"
184          fill="var(--color-desktop)"
185          stroke="var(--color-desktop)"
186          fillOpacity={0.3}
187        />
188        <Area
189          dataKey="mobile"
190          fill="var(--color-mobile)"
191          stroke="var(--color-mobile)"
192          fillOpacity={0.3}
193        />
194        <ChartTooltip content={<ChartTooltipContent />} />
195        <ChartLegend content={<ChartLegendContent />} />
196      </AreaChart>
197    </ChartContainer>
198  )
199}
200```
201 
202--------------------------------
203 
204### shadcn/ui Chart Component - Pie Chart Example
205 
206Source: https://ui.shadcn.com/docs/components/chart
207 
208Creating a pie/donut chart with shadcn/ui.
209 
210```tsx
211import { Pie, PieChart } from "recharts"
212import {
213  ChartContainer,
214  ChartLegend,
215  ChartLegendContent,
216  ChartTooltipContent,
217} from "@/components/ui/chart"
218 
219const chartConfig = {
220  chrome: { label: "Chrome", color: "var(--chart-1)" },
221  safari: { label: "Safari", color: "var(--chart-2)" },
222  firefox: { label: "Firefox", color: "var(--chart-3)" },
223} satisfies import("@/components/ui/chart").ChartConfig
224 
225const pieData = [
226  { browser: "Chrome", visitors: 275, fill: "var(--color-chrome)" },
227  { browser: "Safari", visitors: 200, fill: "var(--color-safari)" },
228  { browser: "Firefox", visitors: 187, fill: "var(--color-firefox)" },
229]
230 
231export function PieChartDemo() {
232  return (
233    <ChartContainer config={chartConfig} className="min-h-[200px]">
234      <PieChart>
235        <Pie
236          data={pieData}
237          dataKey="visitors"
238          nameKey="browser"
239          cx="50%"
240          cy="50%"
241          outerRadius={80}
242        />
243        <ChartTooltip content={<ChartTooltipContent />} />
244        <ChartLegend content={<ChartLegendContent />} />
245      </PieChart>
246    </ChartContainer>
247  )
248}
249```
250 
251--------------------------------
252 
253### shadcn/ui ChartTooltipContent Props
254 
255Source: https://ui.shadcn.com/docs/components/chart
256 
257The ChartTooltipContent component accepts these props for customizing tooltip behavior.
258 
259| Prop | Type | Default | Description |
260|------|------|---------|-------------|
261| `labelKey` | string | "label" | Key for tooltip label |
262| `nameKey` | string | "name" | Key for tooltip name |
263| `indicator` | "dot" \| "line" \| "dashed" | "dot" | Indicator style |
264| `hideLabel` | boolean | false | Hide label |
265| `hideIndicator` | boolean | false | Hide indicator |
266 
267--------------------------------
268 
269### shadcn/ui Chart Component - Accessibility
270 
271Source: https://ui.shadcn.com/docs/components/chart
272 
273Enable keyboard navigation and screen reader support by adding the accessibilityLayer prop.
274 
275```tsx
276<BarChart accessibilityLayer data={chartData}>
277  <CartesianGrid vertical={false} />
278  <XAxis dataKey="month" />
279  <Bar dataKey="desktop" fill="var(--color-desktop)" />
280  <ChartTooltip content={<ChartTooltipContent />} />
281</BarChart>
282```
283 
284This adds:
285- Keyboard arrow key navigation
286- ARIA labels for chart elements
287- Screen reader announcements for data values
288 
289--------------------------------
290 
291### shadcn/ui Chart Component - Recharts Dependencies
292 
293Source: https://ui.shadcn.com/docs/components/chart
294 
295The chart component requires the following Recharts dependencies to be installed.
296 
297```bash
298pnpm add recharts
299npm install recharts
300yarn add recharts
301```
302 
303Recharts provides the following chart types:
304- Area, Bar, Line, Pie, Composed
305- Radar, RadialBar, Scatter
306- Funnel, Treemap
307