0
# Chart Components
1

2
Complete chart solutions for different data visualization needs. Recharts provides both Cartesian charts for linear data representation and polar charts for circular visualizations, plus specialized charts for hierarchical and flow data.
3

4
## Capabilities
5

6
### Cartesian Charts
7

8
#### LineChart
9

10
Line chart for continuous data with connected points, ideal for showing trends over time or continuous variables.
11

12
```typescript { .api }
13
/**
14
 * Line chart component for displaying continuous data trends
15
 * @param props - Chart configuration and data
16
 * @returns React component rendering an SVG line chart
17
 */
18
function LineChart(props: CartesianChartProps): JSX.Element;
19
```
20

21
**Usage Example:**
22

23
```typescript
24
import { LineChart, Line, XAxis, YAxis, Tooltip } from 'recharts';
25

26
const data = [
27
  { month: 'Jan', sales: 4000 },
28
  { month: 'Feb', sales: 3000 },
29
  { month: 'Mar', sales: 5000 },
30
];
31

32
<LineChart width={600} height={300} data={data}>
33
  <XAxis dataKey="month" />
34
  <YAxis />
35
  <Tooltip />
36
  <Line type="monotone" dataKey="sales" stroke="#8884d8" />
37
</LineChart>
38
```
39

40
#### BarChart
41

42
Bar chart for categorical data with rectangular bars, perfect for comparing discrete categories or values.
43

44
```typescript { .api }
45
/**
46
 * Bar chart component for displaying categorical data comparisons
47
 * @param props - Chart configuration and data
48
 * @returns React component rendering an SVG bar chart
49
 */
50
function BarChart(props: CartesianChartProps): JSX.Element;
51
```
52

53
**Usage Example:**
54

55
```typescript
56
import { BarChart, Bar, XAxis, YAxis, Tooltip } from 'recharts';
57

58
<BarChart width={600} height={300} data={data}>
59
  <XAxis dataKey="month" />
60
  <YAxis />
61
  <Tooltip />
62
  <Bar dataKey="sales" fill="#8884d8" />
63
</BarChart>
64
```
65

66
#### AreaChart
67

68
Area chart with filled areas under lines, useful for showing quantitative progression and cumulative values.
69

70
```typescript { .api }
71
/**
72
 * Area chart component for displaying quantitative data with filled areas
73
 * @param props - Chart configuration and data
74
 * @returns React component rendering an SVG area chart
75
 */
76
function AreaChart(props: CartesianChartProps): JSX.Element;
77
```
78

79
#### ScatterChart
80

81
Scatter plot for showing relationships between two variables, ideal for correlation analysis.
82

83
```typescript { .api }
84
/**
85
 * Scatter chart component for displaying two-variable relationships
86
 * @param props - Chart configuration and data
87
 * @returns React component rendering an SVG scatter plot
88
 */
89
function ScatterChart(props: CartesianChartProps): JSX.Element;
90
```
91

92
#### ComposedChart
93

94
Combination chart supporting multiple chart types in one view, allowing overlay of different data series.
95

96
```typescript { .api }
97
/**
98
 * Composed chart component supporting multiple chart types
99
 * @param props - Chart configuration and data
100
 * @returns React component rendering multiple chart types
101
 */
102
function ComposedChart(props: CartesianChartProps): JSX.Element;
103
```
104

105
#### FunnelChart
106

107
Funnel chart for displaying progressive reduction of data, commonly used for conversion flows.
108

109
```typescript { .api }
110
/**
111
 * Funnel chart component for displaying progressive data reduction
112
 * @param props - Chart configuration and data
113
 * @returns React component rendering an SVG funnel chart
114
 */
115
function FunnelChart(props: CartesianChartProps): JSX.Element;
116
```
117

118
### Polar Charts
119

120
#### PieChart
121

122
Pie chart for displaying parts of a whole, with support for both pie and donut chart styles.
123

124
```typescript { .api }
125
/**
126
 * Pie chart component for displaying proportional data
127
 * @param props - Chart configuration and data
128
 * @returns React component rendering an SVG pie chart
129
 */
130
function PieChart(props: PolarChartProps): JSX.Element;
131
```
132

133
**Usage Example:**
134

135
```typescript
136
import { PieChart, Pie, Cell, Tooltip } from 'recharts';
137

138
const data = [
139
  { name: 'Group A', value: 400 },
140
  { name: 'Group B', value: 300 },
141
  { name: 'Group C', value: 300 },
142
];
143

144
<PieChart width={400} height={400}>
145
  <Pie data={data} dataKey="value" cx="50%" cy="50%" outerRadius={80} fill="#8884d8" />
146
  <Tooltip />
147
</PieChart>
148
```
149

150
#### RadarChart
151

152
Radar/spider chart for multivariate data visualization, showing multiple metrics on different axes.
153

154
```typescript { .api }
155
/**
156
 * Radar chart component for multivariate data visualization
157
 * @param props - Chart configuration and data
158
 * @returns React component rendering an SVG radar chart
159
 */
160
function RadarChart(props: PolarChartProps): JSX.Element;
161
```
162

163
#### RadialBarChart
164

165
Radial bar chart for circular data representation, displaying bars in a circular layout.
166

167
```typescript { .api }
168
/**
169
 * Radial bar chart component for circular bar visualization
170
 * @param props - Chart configuration and data
171
 * @returns React component rendering an SVG radial bar chart
172
 */
173
function RadialBarChart(props: PolarChartProps): JSX.Element;
174
```
175

176
### Specialized Charts
177

178
#### Treemap
179

180
Treemap for hierarchical data using nested rectangles, where rectangle size represents data magnitude.
181

182
```typescript { .api }
183
/**
184
 * Treemap component for hierarchical data visualization
185
 * @param props - Treemap-specific configuration and hierarchical data
186
 * @returns React component rendering an SVG treemap
187
 */
188
function Treemap(props: TreemapProps): JSX.Element;
189

190
interface TreemapProps {
191
  width: number;
192
  height: number;
193
  data: TreemapDataType[];
194
  dataKey: string | number | ((dataObject: any) => any);
195
  aspectRatio?: number;
196
  type?: 'flat' | 'nest';
197
  animationDuration?: number;
198
}
199

200
interface TreemapDataType {
201
  name?: string;
202
  size?: number;
203
  children?: TreemapDataType[];
204
  [key: string]: any;
205
}
206
```
207

208
#### Sankey
209

210
Sankey diagram for visualizing flow between nodes, commonly used for process flows and energy diagrams.
211

212
```typescript { .api }
213
/**
214
 * Sankey diagram component for flow visualization
215
 * @param props - Sankey-specific configuration and flow data
216
 * @returns React component rendering an SVG sankey diagram
217
 */
218
function Sankey(props: SankeyProps): JSX.Element;
219

220
interface SankeyProps {
221
  width: number;
222
  height: number;
223
  data: SankeyData;
224
  nodeWidth?: number;
225
  nodePadding?: number;
226
  linkCurvature?: number;
227
  iterations?: number;
228
  margin?: { top?: number; right?: number; bottom?: number; left?: number };
229
}
230

231
interface SankeyData {
232
  nodes: Array<{ name: string; [key: string]: any }>;
233
  links: Array<{ source: number; target: number; value: number; [key: string]: any }>;
234
}
235
```
236

237
#### SunburstChart
238

239
Sunburst chart for hierarchical data visualization in concentric circles, showing nested categorical data.
240

241
```typescript { .api }
242
/**
243
 * Sunburst chart component for hierarchical circular visualization
244
 * @param props - Sunburst-specific configuration and hierarchical data
245
 * @returns React component rendering an SVG sunburst chart
246
 */
247
function SunburstChart(props: SunburstChartProps): JSX.Element;
248

249
interface SunburstChartProps {
250
  width: number;
251
  height: number;
252
  data: SunburstData[];
253
  dataKey: string | number | ((dataObject: any) => any);
254
  nameKey?: string | number | ((dataObject: any) => any);
255
  cx?: number | string;
256
  cy?: number | string;
257
  innerRadius?: number | string;
258
  outerRadius?: number | string;
259
  startAngle?: number;
260
  endAngle?: number;
261
}
262

263
interface SunburstData {
264
  name?: string;
265
  value?: number;
266
  children?: SunburstData[];
267
  [key: string]: any;
268
}
269
```
270

271
## Common Chart Props
272

273
### CartesianChartProps
274

275
Base props interface for all Cartesian coordinate system charts (LineChart, BarChart, AreaChart, ScatterChart, ComposedChart, FunnelChart).
276

277
```typescript { .api }
278
interface CartesianChartProps {
279
  /** Array of data objects to visualize */
280
  data?: any[];
281
  /** Chart width in pixels */
282
  width?: number;
283
  /** Chart height in pixels */
284
  height?: number;
285
  /** Chart margins */
286
  margin?: { top?: number; right?: number; bottom?: number; left?: number };
287
  /** Layout direction for the chart */
288
  layout?: 'vertical' | 'horizontal';
289
  /** Synchronization ID for multiple charts */
290
  syncId?: string | number;
291
  /** Synchronization method for coordinated charts */
292
  syncMethod?: 'index' | 'value' | ((ticks: any[], data: any) => number);
293
  /** Stacking offset method for stacked charts */
294
  stackOffset?: 'expand' | 'none' | 'wiggle' | 'silhouette' | 'sign' | 'positive';
295
  /** Reverse stack order */
296
  reverseStackOrder?: boolean;
297
  /** Gap between bar categories */
298
  barCategoryGap?: number | string;
299
  /** Gap between bars in same category */
300
  barGap?: number | string;
301
  /** Bar size */
302
  barSize?: number | string;
303
  /** Maximum bar size */
304
  maxBarSize?: number;
305
  /** Data key for accessing data values */
306
  dataKey?: string | number | ((obj: any) => any);
307
  /** Enable accessibility layer for screen readers */
308
  accessibilityLayer?: boolean;
309
  /** Compact mode for space-saving rendering */
310
  compact?: boolean;
311
  /** Throttle delay for mouse events in milliseconds */
312
  throttleDelay?: number;
313
  /** CSS class name */
314
  className?: string;
315
  /** Inline styles */
316
  style?: any;
317
  /** Element ID */
318
  id?: string;
319
  /** ARIA role */
320
  role?: string;
321
  /** Tab index for keyboard navigation */
322
  tabIndex?: number;
323
  /** Chart title for accessibility */
324
  title?: string;
325
  /** Chart description for accessibility */
326
  desc?: string;
327
  /** React children (axes, data series, etc.) */
328
  children?: React.ReactNode;
329
}
330
```
331

332
### PolarChartProps
333

334
Base props interface for all polar coordinate system charts (PieChart, RadarChart, RadialBarChart).
335

336
```typescript { .api }
337
interface PolarChartProps {
338
  /** Array of data objects to visualize */
339
  data?: any[];
340
  /** Chart width in pixels */
341
  width?: number;
342
  /** Chart height in pixels */
343
  height?: number;
344
  /** Center X coordinate */
345
  cx?: number | string;
346
  /** Center Y coordinate */
347
  cy?: number | string;
348
  /** Inner radius for donut-style charts */
349
  innerRadius?: number | string;
350
  /** Outer radius of the chart */
351
  outerRadius?: number | string;
352
  /** Starting angle in degrees */
353
  startAngle?: number;
354
  /** Ending angle in degrees */
355
  endAngle?: number;
356
  /** Chart margins */
357
  margin?: { top?: number; right?: number; bottom?: number; left?: number };
358
  /** Layout type */
359
  layout?: 'centric' | 'radial';
360
  /** Synchronization ID for multiple charts */
361
  syncId?: string | number;
362
  /** Synchronization method for coordinated charts */
363
  syncMethod?: 'index' | 'value' | ((ticks: any[], data: any) => number);
364
  /** Stacking offset method for stacked charts */
365
  stackOffset?: 'expand' | 'none' | 'wiggle' | 'silhouette' | 'sign' | 'positive';
366
  /** Reverse stack order */
367
  reverseStackOrder?: boolean;
368
  /** Gap between bar categories */
369
  barCategoryGap?: number | string;
370
  /** Gap between bars in same category */
371
  barGap?: number | string;
372
  /** Bar size */
373
  barSize?: number | string;
374
  /** Maximum bar size */
375
  maxBarSize?: number;
376
  /** Data key for accessing data values */
377
  dataKey?: string | number | ((obj: any) => any);
378
  /** Enable accessibility layer for screen readers */
379
  accessibilityLayer?: boolean;
380
  /** Throttle delay for mouse events in milliseconds */
381
  throttleDelay?: number;
382
  /** CSS class name */
383
  className?: string;
384
  /** Inline styles */
385
  style?: any;
386
  /** Element ID */
387
  id?: string;
388
  /** ARIA role */
389
  role?: string;
390
  /** Tab index for keyboard navigation */
391
  tabIndex?: number;
392
  /** Chart title for accessibility */
393
  title?: string;
394
  /** Chart description for accessibility */
395
  desc?: string;
396
  /** React children (data series, axes, etc.) */
397
  children?: React.ReactNode;
398
}
399
```