0
# Cartesian Components
1

2
Components for Cartesian coordinate system charts, including axes, data series, grid systems, and reference elements. These components work together to create line charts, bar charts, area charts, and other rectangular coordinate visualizations.
3

4
## Capabilities
5

6
### Axes Components
7

8
#### XAxis
9

10
Horizontal axis component for Cartesian charts with support for various data types and formatting options.
11

12
```typescript { .api }
13
/**
14
 * X-axis component for horizontal axis rendering
15
 * @param props - X-axis configuration and display options
16
 * @returns React component rendering horizontal axis
17
 */
18
function XAxis(props: XAxisProps): JSX.Element;
19

20
interface XAxisProps {
21
  /** Unique identifier for this X-axis */
22
  xAxisId?: string | number;
23
  /** Data key for axis values */
24
  dataKey?: string | number | ((dataObject: any) => any);
25
  /** Axis height */
26
  height?: number;
27
  /** Axis orientation */
28
  orientation?: 'top' | 'bottom';
29
  /** Axis data type */
30
  type?: 'number' | 'category';
31
  /** Allow duplicate categories */
32
  allowDuplicatedCategory?: boolean;
33
  /** Allow data overflow */
34
  allowDataOverflow?: boolean;
35
  /** Allow decimal intervals */
36
  allowDecimals?: boolean;
37
  /** Hide axis */
38
  hide?: boolean;
39
  /** Scale type */
40
  scale?: 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold';
41
  /** Data domain */
42
  domain?: [any, any] | ((dataMin: any, dataMax: any) => [any, any]);
43
  /** Tick values array */
44
  ticks?: any[];
45
  /** Tick count */
46
  tickCount?: number;
47
  /** Tick formatter */
48
  tickFormatter?: (value: any, index: number) => string;
49
  /** Padding configuration */
50
  padding?: { left?: number; right?: number };
51
  /** Minimum tick gap */
52
  minTickGap?: number;
53
  /** Tick display interval */
54
  interval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
55
  /** Reverse axis direction */
56
  reversed?: boolean;
57
  /** Tick label angle */
58
  angle?: number;
59
  /** Tick margin */
60
  tickMargin?: number;
61
  /** Mirror axis */
62
  mirror?: boolean;
63
  /** Tick component */
64
  tick?: boolean | React.ComponentType<any> | React.ReactElement;
65
  /** Axis line component */
66
  axisLine?: boolean | React.SVGProps<SVGLineElement>;
67
  /** Tick line component */
68
  tickLine?: boolean | React.SVGProps<SVGLineElement>;
69
}
70
```
71

72
**Usage Example:**
73

74
```typescript
75
import { LineChart, Line, XAxis } from 'recharts';
76

77
<LineChart data={data}>
78
  <XAxis 
79
    dataKey="name" 
80
    angle={-45}
81
    textAnchor="end"
82
    height={60}
83
  />
84
  <Line dataKey="value" />
85
</LineChart>
86
```
87

88
#### YAxis
89

90
Vertical axis component for Cartesian charts with numeric and categorical data support.
91

92
```typescript { .api }
93
/**
94
 * Y-axis component for vertical axis rendering
95
 * @param props - Y-axis configuration and display options
96
 * @returns React component rendering vertical axis
97
 */
98
function YAxis(props: YAxisProps): JSX.Element;
99

100
interface YAxisProps {
101
  /** Unique identifier for this Y-axis */
102
  yAxisId?: string | number;
103
  /** Data key for axis values */
104
  dataKey?: string | number | ((dataObject: any) => any);
105
  /** Axis width */
106
  width?: number;
107
  /** Axis orientation */
108
  orientation?: 'left' | 'right';
109
  /** Axis data type */
110
  type?: 'number' | 'category';
111
  /** Allow duplicate categories */
112
  allowDuplicatedCategory?: boolean;
113
  /** Allow data overflow */
114
  allowDataOverflow?: boolean;
115
  /** Allow decimal intervals */
116
  allowDecimals?: boolean;
117
  /** Hide axis */
118
  hide?: boolean;
119
  /** Scale type */
120
  scale?: 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold';
121
  /** Data domain */
122
  domain?: [any, any] | ((dataMin: any, dataMax: any) => [any, any]);
123
  /** Tick values array */
124
  ticks?: any[];
125
  /** Tick count */
126
  tickCount?: number;
127
  /** Tick formatter */
128
  tickFormatter?: (value: any, index: number) => string;
129
  /** Padding configuration */
130
  padding?: { top?: number; bottom?: number };
131
  /** Minimum tick gap */
132
  minTickGap?: number;
133
  /** Tick display interval */
134
  interval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
135
  /** Reverse axis direction */
136
  reversed?: boolean;
137
  /** Mirror axis */
138
  mirror?: boolean;
139
  /** Tick component */
140
  tick?: boolean | React.ComponentType<any> | React.ReactElement;
141
  /** Axis line component */
142
  axisLine?: boolean | React.SVGProps<SVGLineElement>;
143
  /** Tick line component */
144
  tickLine?: boolean | React.SVGProps<SVGLineElement>;
145
}
146
```
147

148
#### ZAxis
149

150
Z-axis component for 3D-like data representation in scatter charts.
151

152
```typescript { .api }
153
/**
154
 * Z-axis component for third dimension data in scatter charts
155
 * @param props - Z-axis configuration
156
 * @returns React component providing Z-axis scaling
157
 */
158
function ZAxis(props: ZAxisProps): JSX.Element;
159

160
interface ZAxisProps {
161
  /** Unique identifier for this Z-axis */
162
  zAxisId?: string | number;
163
  /** Data key for Z values */
164
  dataKey?: string | number | ((dataObject: any) => any);
165
  /** Value range for scaling */
166
  range?: [number, number];
167
  /** Scale type */
168
  scale?: 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold';
169
  /** Axis data type */
170
  type?: 'number' | 'category';
171
  /** Axis name */
172
  name?: string | number;
173
  /** Axis unit */
174
  unit?: string | number;
175
}
176
```
177

178
#### CartesianAxis
179

180
Low-level axis rendering component used internally by XAxis and YAxis.
181

182
```typescript { .api }
183
/**
184
 * Low-level Cartesian axis rendering component
185
 * @param props - Axis rendering configuration
186
 * @returns React component rendering axis elements
187
 */
188
function CartesianAxis(props: CartesianAxisProps): JSX.Element;
189

190
interface CartesianAxisProps {
191
  /** Axis scale function */
192
  scale: any;
193
  /** Axis position X */
194
  x?: number;
195
  /** Axis position Y */
196
  y?: number;
197
  /** Axis width */
198
  width?: number;
199
  /** Axis height */
200
  height?: number;
201
  /** Axis orientation */
202
  orientation?: 'top' | 'bottom' | 'left' | 'right';
203
  /** Tick values */
204
  ticks?: any[];
205
  /** Tick component */
206
  tick?: boolean | React.ComponentType<any> | React.ReactElement;
207
  /** Axis line component */
208
  axisLine?: boolean | React.SVGProps<SVGLineElement>;
209
  /** Tick line component */
210
  tickLine?: boolean | React.SVGProps<SVGLineElement>;
211
  /** Mirror axis */
212
  mirror?: boolean;
213
}
214
```
215

216
### Data Series Components
217

218
#### Line
219

220
Line series component for connecting data points in LineChart and ComposedChart.
221

222
```typescript { .api }
223
/**
224
 * Line series component for connecting data points
225
 * @param props - Line configuration and styling options
226
 * @returns React component rendering line series
227
 */
228
function Line(props: LineProps): JSX.Element;
229

230
interface LineProps {
231
  /** Data key for Y values */
232
  dataKey: string | number | ((dataObject: any) => any);
233
  /** Associated X-axis ID */
234
  xAxisId?: string | number;
235
  /** Associated Y-axis ID */
236
  yAxisId?: string | number;
237
  /** Line curve type */
238
  type?: 'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
239
  /** Stroke color */
240
  stroke?: string;
241
  /** Stroke width */
242
  strokeWidth?: number | string;
243
  /** Stroke dash array */
244
  strokeDasharray?: string | number;
245
  /** Fill color */
246
  fill?: string;
247
  /** Fill opacity */
248
  fillOpacity?: number | string;
249
  /** Stroke opacity */
250
  strokeOpacity?: number | string;
251
  /** Connect null data points */
252
  connectNulls?: boolean;
253
  /** Hide line in legend */
254
  hide?: boolean;
255
  /** Legend type */
256
  legendType?: LegendType;
257
  /** Tooltip type */
258
  tooltipType?: 'none';
259
  /** Dot component */
260
  dot?: boolean | React.ComponentType<any> | React.ReactElement;
261
  /** Active dot component */
262
  activeDot?: boolean | React.ComponentType<any> | React.ReactElement;
263
  /** Animation duration */
264
  animationDuration?: number;
265
  /** Animation easing */
266
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
267
}
268
```
269

270
**Usage Example:**
271

272
```typescript
273
import { LineChart, Line } from 'recharts';
274

275
<LineChart data={data}>
276
  <Line 
277
    type="monotone" 
278
    dataKey="sales" 
279
    stroke="#8884d8" 
280
    strokeWidth={2}
281
    dot={false}
282
    activeDot={{ r: 6 }}
283
  />
284
</LineChart>
285
```
286

287
#### Bar
288

289
Bar series component for rendering rectangular bars in BarChart and ComposedChart.
290

291
```typescript { .api }
292
/**
293
 * Bar series component for rendering rectangular data bars
294
 * @param props - Bar configuration and styling options
295
 * @returns React component rendering bar series
296
 */
297
function Bar(props: BarProps): JSX.Element;
298

299
interface BarProps {
300
  /** Data key for bar values */
301
  dataKey: string | number | ((dataObject: any) => any);
302
  /** Associated X-axis ID */
303
  xAxisId?: string | number;
304
  /** Associated Y-axis ID */
305
  yAxisId?: string | number;
306
  /** Stack ID for stacked bars */
307
  stackId?: string | number;
308
  /** Bar size */
309
  barSize?: number;
310
  /** Maximum bar size */
311
  maxBarSize?: number;
312
  /** Minimum point size for small values */
313
  minPointSize?: number;
314
  /** Fill color */
315
  fill?: string;
316
  /** Fill opacity */
317
  fillOpacity?: number | string;
318
  /** Stroke color */
319
  stroke?: string;
320
  /** Stroke width */
321
  strokeWidth?: number | string;
322
  /** Bar shape component */
323
  shape?: React.ComponentType<any> | React.ReactElement;
324
  /** Active bar component */
325
  activeBar?: boolean | React.ComponentType<any> | React.ReactElement;
326
  /** Background bar component */
327
  background?: boolean | React.ComponentType<any> | React.ReactElement;
328
  /** Hide bar in legend */
329
  hide?: boolean;
330
  /** Legend type */
331
  legendType?: LegendType;
332
  /** Tooltip type */
333
  tooltipType?: 'none';
334
  /** Chart layout */
335
  layout?: 'vertical' | 'horizontal';
336
  /** Animation duration */
337
  animationDuration?: number;
338
  /** Animation easing */
339
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
340
}
341
```
342

343
#### Area
344

345
Area series component for filled areas under lines in AreaChart and ComposedChart.
346

347
```typescript { .api }
348
/**
349
 * Area series component for filled area visualization
350
 * @param props - Area configuration and styling options
351
 * @returns React component rendering area series
352
 */
353
function Area(props: AreaProps): JSX.Element;
354

355
interface AreaProps {
356
  /** Data key for Y values */
357
  dataKey: string | number | ((dataObject: any) => any);
358
  /** Associated X-axis ID */
359
  xAxisId?: string | number;
360
  /** Associated Y-axis ID */
361
  yAxisId?: string | number;
362
  /** Stack ID for stacked areas */
363
  stackId?: string | number;
364
  /** Area curve type */
365
  type?: 'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
366
  /** Base line for area */
367
  baseLine?: number | 'dataMin' | 'dataMax';
368
  /** Fill color */
369
  fill?: string;
370
  /** Fill opacity */
371
  fillOpacity?: number | string;
372
  /** Stroke color */
373
  stroke?: string;
374
  /** Stroke width */
375
  strokeWidth?: number | string;
376
  /** Connect null data points */
377
  connectNulls?: boolean;
378
  /** Hide area in legend */
379
  hide?: boolean;
380
  /** Legend type */
381
  legendType?: LegendType;
382
  /** Tooltip type */
383
  tooltipType?: 'none';
384
  /** Dot component */
385
  dot?: boolean | React.ComponentType<any> | React.ReactElement;
386
  /** Active dot component */
387
  activeDot?: boolean | React.ComponentType<any> | React.ReactElement;
388
  /** Animation duration */
389
  animationDuration?: number;
390
}
391
```
392

393
#### Scatter
394

395
Scatter series component for individual data points in ScatterChart and ComposedChart.
396

397
```typescript { .api }
398
/**
399
 * Scatter series component for individual data points
400
 * @param props - Scatter configuration and styling options
401
 * @returns React component rendering scatter points
402
 */
403
function Scatter(props: ScatterProps): JSX.Element;
404

405
interface ScatterProps {
406
  /** Data key for values */
407
  dataKey?: string | number | ((dataObject: any) => any);
408
  /** Associated X-axis ID */
409
  xAxisId?: string | number;
410
  /** Associated Y-axis ID */
411
  yAxisId?: string | number;
412
  /** Associated Z-axis ID */
413
  zAxisId?: string | number;
414
  /** Fill color */
415
  fill?: string;
416
  /** Point shape component */
417
  shape?: React.ComponentType<any> | React.ReactElement;
418
  /** Hide scatter in legend */
419
  hide?: boolean;
420
  /** Legend type */
421
  legendType?: LegendType;
422
  /** Tooltip type */
423
  tooltipType?: 'none';
424
  /** Animation duration */
425
  animationDuration?: number;
426
}
427
```
428

429
#### Funnel
430

431
Funnel series component for progressive data reduction visualization in FunnelChart.
432

433
```typescript { .api }
434
/**
435
 * Funnel series component for progressive data visualization
436
 * @param props - Funnel configuration and styling options
437
 * @returns React component rendering funnel series
438
 */
439
function Funnel(props: FunnelProps): JSX.Element;
440

441
interface FunnelProps {
442
  /** Data key for funnel values */
443
  dataKey: string | number | ((dataObject: any) => any);
444
  /** Active shape component */
445
  activeShape?: React.ComponentType<any> | React.ReactElement;
446
  /** Trapezoid components array */
447
  trapezoids?: any[];
448
  /** Animation duration */
449
  animationDuration?: number;
450
  /** Animation easing */
451
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
452
}
453
```
454

455
### Grid and Support Components
456

457
#### CartesianGrid
458

459
Grid lines component for Cartesian coordinate system background.
460

461
```typescript { .api }
462
/**
463
 * Cartesian grid component for chart background grid lines
464
 * @param props - Grid configuration and styling options
465
 * @returns React component rendering grid lines
466
 */
467
function CartesianGrid(props: CartesianGridProps): JSX.Element;
468

469
interface CartesianGridProps extends React.SVGProps<SVGElement> {
470
  /** Show horizontal grid lines */
471
  horizontal?: boolean;
472
  /** Show vertical grid lines */
473
  vertical?: boolean;
474
  /** Horizontal grid line positions */
475
  horizontalPoints?: number[];
476
  /** Vertical grid line positions */
477
  verticalPoints?: number[];
478
  /** Grid line stroke color */
479
  stroke?: string;
480
  /** Grid line stroke width */
481
  strokeWidth?: number | string;
482
  /** Grid line stroke dash array */
483
  strokeDasharray?: string | number;
484
  /** Fill color between grid lines */
485
  fill?: string;
486
  /** Fill opacity */
487
  fillOpacity?: number | string;
488
}
489
```
490

491
#### ErrorBar
492

493
Error bar component for showing data uncertainty or variance.
494

495
```typescript { .api }
496
/**
497
 * Error bar component for displaying data uncertainty
498
 * @param props - Error bar configuration and data options
499
 * @returns React component rendering error bars
500
 */
501
function ErrorBar(props: ErrorBarProps): JSX.Element;
502

503
interface ErrorBarProps {
504
  /** Data key for error values */
505
  dataKey?: string | number | ((dataObject: any) => any);
506
  /** Error bar data */
507
  data?: any[];
508
  /** Associated X-axis ID */
509
  xAxisId?: string | number;
510
  /** Associated Y-axis ID */
511
  yAxisId?: string | number;
512
  /** Error bar width */
513
  width?: number;
514
  /** Stroke color */
515
  stroke?: string;
516
  /** Stroke width */
517
  strokeWidth?: number | string;
518
  /** Direction of error bars */
519
  direction?: 'x' | 'y';
520
}
521
```
522

523
#### Brush
524

525
Interactive brush component for data range selection and zooming.
526

527
```typescript { .api }
528
/**
529
 * Brush component for interactive data range selection
530
 * @param props - Brush configuration and interaction options
531
 * @returns React component rendering interactive brush
532
 */
533
function Brush(props: BrushProps): JSX.Element;
534

535
interface BrushProps {
536
  /** Data key for brush values */
537
  dataKey?: string | number | ((dataObject: any) => any);
538
  /** Brush data */
539
  data?: any[];
540
  /** Brush X position */
541
  x?: number;
542
  /** Brush Y position */
543
  y?: number;
544
  /** Brush width */
545
  width?: number;
546
  /** Brush height */
547
  height?: number;
548
  /** Start index for selection */
549
  startIndex?: number;
550
  /** End index for selection */
551
  endIndex?: number;
552
  /** Tick formatter function */
553
  tickFormatter?: (value: any, index: number) => string;
554
  /** Selection change handler */
555
  onChange?: (newIndex: { startIndex: number; endIndex: number }) => void;
556
  /** Fill color */
557
  fill?: string;
558
  /** Stroke color */
559
  stroke?: string;
560
  /** Gap between brush and chart */
561
  gap?: number;
562
  /** Traveller component */
563
  traveller?: React.ComponentType<any> | React.ReactElement;
564
}
565
```
566

567
### Reference Components
568

569
#### ReferenceLine
570

571
Reference line component for marking specific values on charts.
572

573
```typescript { .api }
574
/**
575
 * Reference line component for marking specific values
576
 * @param props - Reference line configuration and styling
577
 * @returns React component rendering reference line
578
 */
579
function ReferenceLine(props: ReferenceLineProps): JSX.Element;
580

581
interface ReferenceLineProps {
582
  /** X value for vertical line */
583
  x?: number | string;
584
  /** Y value for horizontal line */
585
  y?: number | string;
586
  /** Line segment configuration */
587
  segment?: Array<{ x?: number | string; y?: number | string }>;
588
  /** Associated X-axis ID */
589
  xAxisId?: string | number;
590
  /** Associated Y-axis ID */
591
  yAxisId?: string | number;
592
  /** Stroke color */
593
  stroke?: string;
594
  /** Stroke width */
595
  strokeWidth?: number | string;
596
  /** Stroke dash array */
597
  strokeDasharray?: string | number;
598
  /** Label component */
599
  label?: string | number | React.ComponentType<any> | React.ReactElement;
600
  /** If line should be rendered in front */
601
  isFront?: boolean;
602
}
603
```
604

605
#### ReferenceArea
606

607
Reference area component for highlighting value ranges.
608

609
```typescript { .api }
610
/**
611
 * Reference area component for highlighting ranges
612
 * @param props - Reference area configuration and styling
613
 * @returns React component rendering reference area
614
 */
615
function ReferenceArea(props: ReferenceAreaProps): JSX.Element;
616

617
interface ReferenceAreaProps {
618
  /** X1 coordinate */
619
  x1?: number | string;
620
  /** X2 coordinate */
621
  x2?: number | string;
622
  /** Y1 coordinate */
623
  y1?: number | string;
624
  /** Y2 coordinate */
625
  y2?: number | string;
626
  /** Associated X-axis ID */
627
  xAxisId?: string | number;
628
  /** Associated Y-axis ID */
629
  yAxisId?: string | number;
630
  /** Fill color */
631
  fill?: string;
632
  /** Fill opacity */
633
  fillOpacity?: number | string;
634
  /** Stroke color */
635
  stroke?: string;
636
  /** Stroke width */
637
  strokeWidth?: number | string;
638
  /** Label component */
639
  label?: string | number | React.ComponentType<any> | React.ReactElement;
640
  /** If area should be rendered in front */
641
  isFront?: boolean;
642
}
643
```
644

645
#### ReferenceDot
646

647
Reference dot component for marking specific points.
648

649
```typescript { .api }
650
/**
651
 * Reference dot component for marking specific points
652
 * @param props - Reference dot configuration and styling
653
 * @returns React component rendering reference dot
654
 */
655
function ReferenceDot(props: ReferenceDotProps): JSX.Element;
656

657
interface ReferenceDotProps {
658
  /** X coordinate */
659
  x?: number | string;
660
  /** Y coordinate */
661
  y?: number | string;
662
  /** Associated X-axis ID */
663
  xAxisId?: string | number;
664
  /** Associated Y-axis ID */
665
  yAxisId?: string | number;
666
  /** Dot radius */
667
  r?: number;
668
  /** Fill color */
669
  fill?: string;
670
  /** Stroke color */
671
  stroke?: string;
672
  /** Stroke width */
673
  strokeWidth?: number | string;
674
  /** Label component */
675
  label?: string | number | React.ComponentType<any> | React.ReactElement;
676
  /** If dot should be rendered in front */
677
  isFront?: boolean;
678
}
679
```