0
# Polar Components
1

2
Components for polar coordinate system charts, including polar axes, data series, and grid systems. These components enable circular data visualizations like pie charts, radar charts, and radial bar charts.
3

4
## Capabilities
5

6
### Polar Axes Components
7

8
#### PolarAngleAxis
9

10
Angular axis component for polar coordinate system, defining the angular divisions and labels.
11

12
```typescript { .api }
13
/**
14
 * Polar angle axis component for angular divisions in polar charts
15
 * @param props - Angle axis configuration and display options
16
 * @returns React component rendering angular axis
17
 */
18
function PolarAngleAxis(props: PolarAngleAxisProps): JSX.Element;
19

20
interface PolarAngleAxisProps {
21
  /** Unique identifier for this angle axis */
22
  angleAxisId?: string | number;
23
  /** Data key for angle values */
24
  dataKey?: string | number | ((dataObject: any) => any);
25
  /** Center X coordinate */
26
  cx?: number;
27
  /** Center Y coordinate */
28
  cy?: number;
29
  /** Inner radius */
30
  radius?: number;
31
  /** Axis line type */
32
  axisLineType?: 'polygon' | 'circle';
33
  /** Tick orientation */
34
  orientation?: 'inner' | 'outer';
35
  /** Number of ticks */
36
  tickCount?: number;
37
  /** Tick formatter function */
38
  tickFormatter?: (value: any, index: number) => string;
39
  /** Tick component */
40
  tick?: boolean | React.ComponentType<any> | React.ReactElement;
41
  /** Axis line component */
42
  axisLine?: boolean | React.SVGProps<SVGElement>;
43
  /** Tick line component */
44
  tickLine?: boolean | React.SVGProps<SVGLineElement>;
45
  /** Reverse axis direction */
46
  reversed?: boolean;
47
  /** Allow duplicate categories */
48
  allowDuplicatedCategory?: boolean;
49
  /** Type of axis */
50
  type?: 'number' | 'category';
51
  /** Data domain */
52
  domain?: [any, any];
53
  /** Scale type */
54
  scale?: 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold';
55
}
56
```
57

58
#### PolarRadiusAxis
59

60
Radial axis component for polar coordinate system, defining the radial distance scale.
61

62
```typescript { .api }
63
/**
64
 * Polar radius axis component for radial distance scale in polar charts
65
 * @param props - Radius axis configuration and display options
66
 * @returns React component rendering radial axis
67
 */
68
function PolarRadiusAxis(props: PolarRadiusAxisProps): JSX.Element;
69

70
interface PolarRadiusAxisProps {
71
  /** Unique identifier for this radius axis */
72
  radiusAxisId?: string | number;
73
  /** Angle for axis position */
74
  angle?: number;
75
  /** Tick orientation */
76
  orientation?: 'left' | 'right' | 'middle';
77
  /** Axis data type */
78
  type?: 'number' | 'category';
79
  /** Number of ticks */
80
  tickCount?: number;
81
  /** Tick formatter function */
82
  tickFormatter?: (value: any, index: number) => string;
83
  /** Allow decimal values */
84
  allowDecimals?: boolean;
85
  /** Data domain */
86
  domain?: [any, any] | ((dataMin: any, dataMax: any) => [any, any]);
87
  /** Scale type */
88
  scale?: 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold';
89
  /** Tick values array */
90
  ticks?: any[];
91
  /** Tick component */
92
  tick?: boolean | React.ComponentType<any> | React.ReactElement;
93
  /** Axis line component */
94
  axisLine?: boolean | React.SVGProps<SVGLineElement>;
95
  /** Tick line component */
96
  tickLine?: boolean | React.SVGProps<SVGLineElement>;
97
}
98
```
99

100
#### PolarGrid
101

102
Grid system component for polar charts, providing background grid lines in circular or polygonal patterns.
103

104
```typescript { .api }
105
/**
106
 * Polar grid component for background grid in polar charts
107
 * @param props - Grid configuration and styling options
108
 * @returns React component rendering polar grid lines
109
 */
110
function PolarGrid(props: PolarGridProps): JSX.Element;
111

112
interface PolarGridProps extends React.SVGProps<SVGLineElement> {
113
  /** Center X coordinate */
114
  cx?: number;
115
  /** Center Y coordinate */
116
  cy?: number;
117
  /** Inner radius */
118
  innerRadius?: number;
119
  /** Outer radius */
120
  outerRadius?: number;
121
  /** Angular positions for grid lines */
122
  polarAngles?: number[];
123
  /** Radial positions for grid lines */
124
  polarRadius?: number[];
125
  /** Grid type */
126
  gridType?: 'polygon' | 'circle';
127
  /** Show radial lines */
128
  radialLines?: boolean;
129
  /** Associated angle axis ID */
130
  angleAxisId?: string | number;
131
  /** Associated radius axis ID */
132
  radiusAxisId?: string | number;
133
}
134
```
135

136
### Polar Data Series Components
137

138
#### Pie
139

140
Pie series component for pie and donut charts, displaying proportional data as circular sectors.
141

142
```typescript { .api }
143
/**
144
 * Pie series component for pie and donut chart visualization
145
 * @param props - Pie configuration and styling options
146
 * @returns React component rendering pie sectors
147
 */
148
function Pie(props: PieProps): JSX.Element;
149

150
interface PieProps {
151
  /** Data key for pie values */
152
  dataKey: string | number | ((dataObject: any) => any);
153
  /** Center X coordinate */
154
  cx?: number | string;
155
  /** Center Y coordinate */
156
  cy?: number | string;
157
  /** Starting angle in degrees */
158
  startAngle?: number;
159
  /** Ending angle in degrees */
160
  endAngle?: number;
161
  /** Padding angle between sectors */
162
  paddingAngle?: number;
163
  /** Inner radius (for donut charts) */
164
  innerRadius?: number | string;
165
  /** Outer radius */
166
  outerRadius?: number | string;
167
  /** Corner radius for rounded sectors */
168
  cornerRadius?: number | string;
169
  /** Fill color */
170
  fill?: string;
171
  /** Stroke color */
172
  stroke?: string;
173
  /** Stroke width */
174
  strokeWidth?: number | string;
175
  /** Active sector index */
176
  activeIndex?: number | number[];
177
  /** Active sector shape component */
178
  activeShape?: React.ComponentType<any> | React.ReactElement;
179
  /** Inactive sector shape component */
180
  inactiveShape?: React.ComponentType<any> | React.ReactElement;
181
  /** Label configuration */
182
  label?: boolean | React.ComponentType<any> | React.ReactElement | ((entry: any, index: number) => React.ReactNode);
183
  /** Label line configuration */
184
  labelLine?: boolean | React.ComponentType<any> | React.ReactElement;
185
  /** Hide pie in legend */
186
  hide?: boolean;
187
  /** Legend type */
188
  legendType?: LegendType;
189
  /** Tooltip type */
190
  tooltipType?: 'none';
191
  /** Animation duration */
192
  animationDuration?: number;
193
  /** Animation easing */
194
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
195
  /** Minimum angle for small sectors */
196
  minAngle?: number;
197
  /** Name key for labels */
198
  nameKey?: string | number | ((dataObject: any) => any);
199
}
200

201
interface PieLabelRenderProps {
202
  cx: number;
203
  cy: number;
204
  midAngle: number;
205
  innerRadius: number;
206
  outerRadius: number;
207
  value: any;
208
  index: number;
209
  percent: number;
210
  name?: any;
211
  payload: any;
212
}
213
```
214

215
**Usage Example:**
216

217
```typescript
218
import { PieChart, Pie, Cell, Tooltip, Legend } from 'recharts';
219

220
const data = [
221
  { name: 'Group A', value: 400 },
222
  { name: 'Group B', value: 300 },
223
  { name: 'Group C', value: 300 },
224
];
225

226
const COLORS = ['#0088FE', '#00C49F', '#FFBB28'];
227

228
<PieChart width={400} height={400}>
229
  <Pie
230
    data={data}
231
    cx="50%"
232
    cy="50%"
233
    outerRadius={80}
234
    fill="#8884d8"
235
    dataKey="value"
236
    label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
237
  >
238
    {data.map((entry, index) => (
239
      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
240
    ))}
241
  </Pie>
242
  <Tooltip />
243
  <Legend />
244
</PieChart>
245
```
246

247
#### Radar
248

249
Radar series component for radar/spider charts, connecting data points in a circular pattern.
250

251
```typescript { .api }
252
/**
253
 * Radar series component for multivariate data visualization
254
 * @param props - Radar configuration and styling options
255
 * @returns React component rendering radar area
256
 */
257
function Radar(props: RadarProps): JSX.Element;
258

259
interface RadarProps {
260
  /** Data key for radar values */
261
  dataKey: string | number | ((dataObject: any) => any);
262
  /** Associated angle axis ID */
263
  angleAxisId?: string | number;
264
  /** Associated radius axis ID */
265
  radiusAxisId?: string | number;
266
  /** Radar points array */
267
  points?: Array<{ x: number; y: number; cx: number; cy: number; angle: number; radius: number; value: number; payload: any }>;
268
  /** Shape component for radar area */
269
  shape?: React.ComponentType<any> | React.ReactElement;
270
  /** Fill color */
271
  fill?: string;
272
  /** Fill opacity */
273
  fillOpacity?: number | string;
274
  /** Stroke color */
275
  stroke?: string;
276
  /** Stroke width */
277
  strokeWidth?: number | string;
278
  /** Stroke opacity */
279
  strokeOpacity?: number | string;
280
  /** Dot component for data points */
281
  dot?: boolean | React.ComponentType<any> | React.ReactElement;
282
  /** Active dot component */
283
  activeDot?: boolean | React.ComponentType<any> | React.ReactElement;
284
  /** Hide radar in legend */
285
  hide?: boolean;
286
  /** Legend type */
287
  legendType?: LegendType;
288
  /** Tooltip type */
289
  tooltipType?: 'none';
290
  /** Connect null data points */
291
  connectNulls?: boolean;
292
  /** Animation duration */
293
  animationDuration?: number;
294
}
295
```
296

297
**Usage Example:**
298

299
```typescript
300
import { RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis } from 'recharts';
301

302
const data = [
303
  { subject: 'Math', A: 120, B: 110 },
304
  { subject: 'Chinese', A: 98, B: 130 },
305
  { subject: 'English', A: 86, B: 130 },
306
  { subject: 'Geography', A: 99, B: 100 },
307
  { subject: 'Physics', A: 85, B: 90 },
308
  { subject: 'History', A: 65, B: 85 },
309
];
310

311
<RadarChart cx="50%" cy="50%" outerRadius="80%" width={400} height={400} data={data}>
312
  <PolarGrid />
313
  <PolarAngleAxis dataKey="subject" />
314
  <PolarRadiusAxis />
315
  <Radar name="Student A" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
316
  <Radar name="Student B" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} />
317
</RadarChart>
318
```
319

320
#### RadialBar
321

322
Radial bar series component for radial bar charts, displaying bars in a circular layout.
323

324
```typescript { .api }
325
/**
326
 * Radial bar series component for circular bar visualization
327
 * @param props - Radial bar configuration and styling options
328
 * @returns React component rendering radial bars
329
 */
330
function RadialBar(props: RadialBarProps): JSX.Element;
331

332
interface RadialBarProps {
333
  /** Data key for bar values */
334
  dataKey: string | number | ((dataObject: any) => any);
335
  /** Associated angle axis ID */
336
  angleAxisId?: string | number;
337
  /** Associated radius axis ID */
338
  radiusAxisId?: string | number;
339
  /** Minimum angle for bars */
340
  minAngle?: number;
341
  /** Clock-wise direction */
342
  clockWise?: boolean;
343
  /** Corner radius */
344
  cornerRadius?: number | string;
345
  /** Fill color */
346
  fill?: string;
347
  /** Stroke color */
348
  stroke?: string;
349
  /** Stroke width */
350
  strokeWidth?: number | string;
351
  /** Background bar component */
352
  background?: boolean | React.ComponentType<any> | React.ReactElement;
353
  /** Bar shape component */
354
  shape?: React.ComponentType<any> | React.ReactElement;
355
  /** Active bar shape component */
356
  activeShape?: React.ComponentType<any> | React.ReactElement;
357
  /** Hide bar in legend */
358
  hide?: boolean;
359
  /** Legend type */
360
  legendType?: LegendType;
361
  /** Tooltip type */
362
  tooltipType?: 'none';
363
  /** Animation duration */
364
  animationDuration?: number;
365
  /** Animation easing */
366
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
367
}
368
```
369

370
**Usage Example:**
371

372
```typescript
373
import { RadialBarChart, RadialBar, Legend } from 'recharts';
374

375
const data = [
376
  { name: '18-24', uv: 31.47, pv: 2400, fill: '#8884d8' },
377
  { name: '25-29', uv: 26.69, pv: 4567, fill: '#83a6ed' },
378
  { name: '30-34', uv: 15.69, pv: 1398, fill: '#8dd1e1' },
379
  { name: '35-39', uv: 8.22, pv: 9800, fill: '#82ca9d' },
380
];
381

382
<RadialBarChart cx="50%" cy="50%" innerRadius="10%" outerRadius="80%" width={400} height={400} data={data}>
383
  <RadialBar minAngle={15} label={{ position: 'insideStart', fill: '#fff' }} background clockWise dataKey="uv" />
384
  <Legend iconSize={18} width={120} height={140} layout="vertical" verticalAlign="middle" wrapperStyle={{ color: '#999' }} />
385
</RadialBarChart>
386
```
387

388
## Common Polar Props
389

390
### Default Props for Polar Axes
391

392
#### PolarAngleAxis Default Props
393

394
```typescript { .api }
395
interface PolarAngleAxisDefaultProps {
396
  type: 'category';
397
  angleAxisId: 0;
398
  scale: 'auto';
399
  cx: '50%';
400
  cy: '50%';
401
  orientation: 'outer';
402
  axisLineType: 'polygon';
403
  tickCount: 6;
404
  allowDuplicatedCategory: true;
405
}
406
```
407

408
#### PolarRadiusAxis Default Props
409

410
```typescript { .api }
411
interface PolarRadiusAxisDefaultProps {
412
  type: 'number';
413
  radiusAxisId: 0;
414
  cx: '50%';
415
  cy: '50%';
416
  angle: 90;
417
  orientation: 'right';
418
  stroke: '#ccc';
419
  axisLine: true;
420
  tick: true;
421
  tickCount: 5;
422
  allowDecimals: true;
423
}
424
```
425

426
### Shared Polar Types
427

428
```typescript { .api }
429
interface PolarViewBox {
430
  cx?: number;
431
  cy?: number;
432
  innerRadius?: number;
433
  outerRadius?: number;
434
  startAngle?: number;
435
  endAngle?: number;
436
}
437

438
interface PieActiveShape {
439
  cx: number;
440
  cy: number;
441
  innerRadius: number;
442
  outerRadius: number;
443
  startAngle: number;
444
  endAngle: number;
445
  fill: string;
446
  payload: any;
447
  value: any;
448
}
449
```