0
# Shape Components
1

2
Primitive shape components for custom visualizations and chart element construction. These components provide the building blocks for creating custom chart elements and can be used standalone or as part of larger chart compositions.
3

4
## Capabilities
5

6
### Basic Shape Components
7

8
#### Rectangle
9

10
Rounded rectangle shape component with animation support, commonly used for bars and backgrounds.
11

12
```typescript { .api }
13
/**
14
 * Rectangle shape component with rounded corners and animation
15
 * @param props - Rectangle configuration and styling options
16
 * @returns React component rendering SVG rectangle path
17
 */
18
function Rectangle(props: RectangleProps): JSX.Element;
19

20
interface RectangleProps extends React.SVGProps<SVGPathElement> {
21
  /** Rectangle X position */
22
  x?: number;
23
  /** Rectangle Y position */
24
  y?: number;
25
  /** Rectangle width */
26
  width?: number;
27
  /** Rectangle height */
28
  height?: number;
29
  /** Corner radius - single value or array for each corner [topRight, bottomRight, bottomLeft, topLeft] */
30
  radius?: number | [number, number, number, number];
31
  /** CSS class name */
32
  className?: string;
33
  /** Enable animation */
34
  isAnimationActive?: boolean;
35
  /** Animation duration in milliseconds */
36
  animationDuration?: number;
37
  /** Animation easing function */
38
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
39
}
40
```
41

42
**Usage Example:**
43

44
```typescript
45
import { Rectangle } from 'recharts';
46

47
<Rectangle 
48
  x={10} 
49
  y={10} 
50
  width={100} 
51
  height={50} 
52
  radius={[10, 10, 0, 0]} 
53
  fill="#8884d8" 
54
/>
55
```
56

57
#### Sector
58

59
Circular sector/arc shape component for pie charts and circular visualizations.
60

61
```typescript { .api }
62
/**
63
 * Sector shape component for circular arcs and pie slices
64
 * @param props - Sector configuration and styling options
65
 * @returns React component rendering SVG sector path
66
 */
67
function Sector(props: SectorProps): JSX.Element;
68

69
interface SectorProps {
70
  /** Center X coordinate */
71
  cx?: number;
72
  /** Center Y coordinate */
73
  cy?: number;
74
  /** Inner radius */
75
  innerRadius?: number;
76
  /** Outer radius */
77
  outerRadius?: number;
78
  /** Starting angle in degrees */
79
  startAngle?: number;
80
  /** Ending angle in degrees */
81
  endAngle?: number;
82
  /** Corner radius for rounded edges */
83
  cornerRadius?: number | string;
84
  /** Force corner radius on small sectors */
85
  forceCornerRadius?: boolean;
86
  /** Corner radius applied externally */
87
  cornerIsExternal?: boolean;
88
  /** CSS class name */
89
  className?: string;
90
  /** Fill color */
91
  fill?: string;
92
  /** Stroke color */
93
  stroke?: string;
94
  /** Stroke width */
95
  strokeWidth?: number | string;
96
}
97
```
98

99
#### Dot
100

101
Circular dot/point shape component for scatter plots and line chart points.
102

103
```typescript { .api }
104
/**
105
 * Dot shape component for circular points and markers
106
 * @param props - Dot configuration and styling options
107
 * @returns React component rendering SVG circle
108
 */
109
function Dot(props: DotProps): JSX.Element;
110

111
interface DotProps extends React.SVGProps<SVGCircleElement> {
112
  /** Center X coordinate */
113
  cx?: number;
114
  /** Center Y coordinate */
115
  cy?: number;
116
  /** Dot radius */
117
  r?: number;
118
  /** CSS class name */
119
  className?: string;
120
  /** Clip dot to chart area */
121
  clipDot?: boolean;
122
}
123
```
124

125
#### Cross
126

127
Cross/plus symbol shape component for markers and indicators.
128

129
```typescript { .api }
130
/**
131
 * Cross shape component for plus/cross symbols
132
 * @param props - Cross configuration and styling options
133
 * @returns React component rendering SVG cross paths
134
 */
135
function Cross(props: CrossProps): JSX.Element;
136

137
interface CrossProps extends React.SVGProps<SVGElement> {
138
  /** Center X coordinate */
139
  x?: number;
140
  /** Center Y coordinate */
141
  y?: number;
142
  /** Cross size */
143
  size?: number;
144
  /** Fill color */
145
  fill?: string;
146
  /** Stroke color */
147
  stroke?: string;
148
}
149
```
150

151
### Advanced Shape Components
152

153
#### Curve
154

155
Curved line/path component with various interpolation types for smooth data connections.
156

157
```typescript { .api }
158
/**
159
 * Curve shape component for smooth line interpolation
160
 * @param props - Curve configuration and path options
161
 * @returns React component rendering SVG curve path
162
 */
163
function Curve(props: CurveProps): JSX.Element;
164

165
interface CurveProps {
166
  /** Curve interpolation type */
167
  type?: CurveType;
168
  /** Array of points to connect */
169
  points?: Array<{ x: number; y: number }>;
170
  /** Fill color for closed curves */
171
  fill?: string;
172
  /** Stroke color */
173
  stroke?: string;
174
  /** Stroke width */
175
  strokeWidth?: number | string;
176
  /** Chart layout direction */
177
  layout?: 'horizontal' | 'vertical';
178
  /** Connect null/undefined points */
179
  connectNulls?: boolean;
180
  /** Path element ref */
181
  pathRef?: React.Ref<SVGPathElement>;
182
  /** CSS class name */
183
  className?: string;
184
}
185

186
type CurveType = 
187
  | 'basis' | 'basisClosed' | 'basisOpen'
188
  | 'bumpX' | 'bumpY' 
189
  | 'linear' | 'linearClosed' 
190
  | 'natural' 
191
  | 'monotoneX' | 'monotoneY' 
192
  | 'step' | 'stepBefore' | 'stepAfter';
193
```
194

195
#### Polygon
196

197
Multi-point polygon shape component for connecting multiple coordinate points.
198

199
```typescript { .api }
200
/**
201
 * Polygon shape component for multi-point geometric shapes
202
 * @param props - Polygon configuration and point data
203
 * @returns React component rendering SVG polygon
204
 */
205
function Polygon(props: PolygonProps): JSX.Element;
206

207
interface PolygonProps extends React.SVGProps<SVGPolygonElement> {
208
  /** Array of coordinate points */
209
  points?: Array<{ x: number; y: number }>;
210
  /** CSS class name */
211
  className?: string;
212
}
213
```
214

215
#### Symbols
216

217
Various symbol shapes component (circle, cross, diamond, square, star, triangle, wye) for data point markers.
218

219
```typescript { .api }
220
/**
221
 * Symbols shape component for various marker symbols
222
 * @param props - Symbol configuration and type options
223
 * @returns React component rendering specified symbol shape
224
 */
225
function Symbols(props: SymbolsProps): JSX.Element;
226

227
interface SymbolsProps {
228
  /** Symbol type */
229
  type?: SymbolType;
230
  /** Symbol size */
231
  size?: number;
232
  /** Size calculation type */
233
  sizeType?: 'area' | 'diameter';
234
  /** CSS class name */
235
  className?: string;
236
  /** Center X coordinate */
237
  cx?: number;
238
  /** Center Y coordinate */
239
  cy?: number;
240
}
241

242
type SymbolType = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
243
```
244

245
**Usage Example:**
246

247
```typescript
248
import { ScatterChart, Scatter, Symbols } from 'recharts';
249

250
<ScatterChart data={data}>
251
  <Scatter 
252
    dataKey="value" 
253
    shape={<Symbols type="star" size={64} />}
254
  />
255
</ScatterChart>
256
```
257

258
#### Trapezoid
259

260
Trapezoid shape component specifically designed for funnel charts.
261

262
```typescript { .api }
263
/**
264
 * Trapezoid shape component for funnel chart segments
265
 * @param props - Trapezoid configuration and dimensions  
266
 * @returns React component rendering SVG trapezoid path
267
 */
268
function Trapezoid(props: TrapezoidProps): JSX.Element;
269

270
interface TrapezoidProps {
271
  /** Top-left X position */
272
  x?: number;
273
  /** Top-left Y position */
274
  y?: number;
275
  /** Upper width (top edge) */
276
  upperWidth?: number;
277
  /** Lower width (bottom edge) */
278
  lowerWidth?: number;
279
  /** Trapezoid height */
280
  height?: number;
281
  /** Fill color */
282
  fill?: string;
283
  /** Stroke color */
284
  stroke?: string;
285
  /** Stroke width */
286
  strokeWidth?: number | string;
287
  /** CSS class name */
288
  className?: string;
289
}
290
```
291

292
## Shape Component Usage Patterns
293

294
### Custom Bar Shapes
295

296
```typescript
297
import { BarChart, Bar, Rectangle } from 'recharts';
298

299
const CustomBar = (props: any) => {
300
  const { fill, x, y, width, height } = props;
301
  return (
302
    <Rectangle 
303
      x={x} 
304
      y={y} 
305
      width={width} 
306
      height={height} 
307
      radius={[4, 4, 0, 0]} 
308
      fill={fill} 
309
    />
310
  );
311
};
312

313
<BarChart data={data}>
314
  <Bar dataKey="value" shape={<CustomBar />} />
315
</BarChart>
316
```
317

318
### Custom Pie Sector Shapes
319

320
```typescript
321
import { PieChart, Pie, Sector } from 'recharts';
322

323
const CustomSector = (props: any) => {
324
  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props;
325
  return (
326
    <Sector
327
      cx={cx}
328
      cy={cy}
329
      innerRadius={innerRadius}
330
      outerRadius={outerRadius + 10}
331
      startAngle={startAngle}
332
      endAngle={endAngle}
333
      fill={fill}
334
      cornerRadius={5}
335
    />
336
  );
337
};
338

339
<PieChart>
340
  <Pie data={data} dataKey="value" activeShape={<CustomSector />} />
341
</PieChart>
342
```
343

344
### Custom Line Dots
345

346
```typescript
347
import { LineChart, Line, Dot } from 'recharts';
348

349
const CustomDot = (props: any) => {
350
  const { cx, cy, fill } = props;
351
  return <Dot cx={cx} cy={cy} r={6} fill={fill} stroke="#fff" strokeWidth={2} />;
352
};
353

354
<LineChart data={data}>
355
  <Line dataKey="value" dot={<CustomDot />} />
356
</LineChart>
357
```
358

359
## Animation and Styling
360

361
### Animation Props
362

363
Most shape components support animation through these common props:
364

365
```typescript { .api }
366
interface AnimationProps {
367
  /** Enable animation */
368
  isAnimationActive?: boolean;
369
  /** Animation duration in milliseconds */
370
  animationDuration?: number;
371
  /** Animation easing function */
372
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
373
  /** Animation start value */
374
  animationBegin?: number;
375
}
376
```
377

378
### Common Styling Props
379

380
All shape components inherit standard SVG styling properties:
381

382
```typescript { .api }
383
interface CommonShapeProps extends React.SVGProps<SVGElement> {
384
  /** Fill color */
385
  fill?: string;
386
  /** Fill opacity */
387
  fillOpacity?: number | string;
388
  /** Stroke color */
389
  stroke?: string;
390
  /** Stroke width */
391
  strokeWidth?: number | string;
392
  /** Stroke opacity */
393
  strokeOpacity?: number | string;
394
  /** Stroke dash array */
395
  strokeDasharray?: string | number;
396
  /** CSS class name */
397
  className?: string;
398
  /** Inline styles */
399
  style?: React.CSSProperties;
400
}
401
```