0
# UI Components
1

2
Essential UI components for interactive functionality and enhanced chart presentation. These components provide user interaction capabilities, responsive behavior, and visual enhancements to charts.
3

4
## Capabilities
5

6
### Interactive Components
7

8
#### Tooltip
9

10
Interactive tooltip for displaying data information on hover or click interactions.
11

12
```typescript { .api }
13
/**
14
 * Tooltip component for displaying interactive data information
15
 * @param props - Tooltip configuration and behavior options
16
 * @returns React component rendering tooltip overlay
17
 */
18
function Tooltip<TValue = any, TName = any>(props: TooltipProps<TValue, TName>): JSX.Element;
19

20
interface TooltipProps<TValue, TName> {
21
  /** Whether tooltip is currently active/visible */
22
  active?: boolean;
23
  /** Custom content component or element */
24
  content?: React.ComponentType<any> | React.ReactElement;
25
  /** Cursor style configuration */
26
  cursor?: boolean | React.SVGProps<SVGElement>;
27
  /** Animation duration in milliseconds */
28
  animationDuration?: number;
29
  /** Animation easing function */
30
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
31
  /** Allow tooltip to escape chart viewBox */
32
  allowEscapeViewBox?: { x?: boolean; y?: boolean };
33
  /** Include hidden data series in tooltip */
34
  includeHidden?: boolean;
35
  /** Filter null/undefined values from tooltip */
36
  filterNull?: boolean;
37
  /** Render tooltip in a portal */
38
  portal?: boolean;
39
}
40
```
41

42
**Usage Example:**
43

44
```typescript
45
import { LineChart, Line, Tooltip } from 'recharts';
46

47
<LineChart data={data}>
48
  <Line dataKey="value" />
49
  <Tooltip 
50
    animationDuration={200}
51
    cursor={{ stroke: '#8884d8', strokeWidth: 2 }}
52
  />
53
</LineChart>
54
```
55

56
#### DefaultTooltipContent
57

58
Default tooltip content renderer with standard formatting and styling.
59

60
```typescript { .api }
61
/**
62
 * Default tooltip content component with standard formatting
63
 * @param props - Content rendering configuration
64
 * @returns React component rendering formatted tooltip content
65
 */
66
function DefaultTooltipContent(props: DefaultTooltipContentProps): JSX.Element;
67

68
interface DefaultTooltipContentProps {
69
  /** Tooltip payload data */
70
  payload?: Array<{ value: any; name: any; color?: string; dataKey?: string }>;
71
  /** Current label for the tooltip */
72
  label?: any;
73
  /** Label formatter function */
74
  labelFormatter?: (label: any) => React.ReactNode;
75
  /** Value formatter function */
76
  formatter?: (value: any, name: any) => [React.ReactNode, React.ReactNode];
77
  /** Separator between label and value */
78
  separator?: string;
79
  /** Content wrapper style */
80
  wrapperStyle?: React.CSSProperties;
81
  /** Content style */
82
  contentStyle?: React.CSSProperties;
83
  /** Label style */
84
  labelStyle?: React.CSSProperties;
85
  /** Item style */
86
  itemStyle?: React.CSSProperties;
87
}
88
```
89

90
#### Legend
91

92
Chart legend for labeling data series and providing interactive filtering.
93

94
```typescript { .api }
95
/**
96
 * Legend component for data series labeling and interaction
97
 * @param props - Legend configuration and display options
98
 * @returns React component rendering chart legend
99
 */
100
function Legend(props: LegendProps): JSX.Element;
101

102
interface LegendProps {
103
  /** Custom legend content component */
104
  content?: React.ComponentType<any> | React.ReactElement;
105
  /** Legend wrapper styling */
106
  wrapperStyle?: React.CSSProperties;
107
  /** Legend width */
108
  width?: number;
109
  /** Legend height */
110
  height?: number;
111
  /** Legend layout direction */
112
  layout?: 'horizontal' | 'vertical';
113
  /** Horizontal alignment */
114
  align?: 'left' | 'center' | 'right';
115
  /** Vertical alignment */
116
  verticalAlign?: 'top' | 'middle' | 'bottom';
117
  /** Icon type for legend items */
118
  iconType?: LegendType;
119
  /** Legend data payload */
120
  payload?: LegendPayload[];
121
  /** Unique key function for payload items */
122
  payloadUniqBy?: (entry: LegendPayload) => string;
123
  /** Render legend in portal */
124
  portal?: boolean;
125
}
126

127
interface LegendPayload {
128
  value: any;
129
  id?: string;
130
  type?: LegendType;
131
  color?: string;
132
  payload?: any;
133
}
134
```
135

136
#### DefaultLegendContent
137

138
Default legend content renderer with standard icons and text formatting.
139

140
```typescript { .api }
141
/**
142
 * Default legend content component with standard formatting
143
 * @param props - Legend content configuration
144
 * @returns React component rendering formatted legend items
145
 */
146
function DefaultLegendContent(props: DefaultLegendContentProps): JSX.Element;
147

148
interface DefaultLegendContentProps {
149
  /** Legend payload data */
150
  payload?: LegendPayload[];
151
  /** Icon type */
152
  iconType?: LegendType;
153
  /** Layout direction */
154
  layout?: 'horizontal' | 'vertical';
155
  /** Horizontal alignment */
156
  align?: 'left' | 'center' | 'right';
157
  /** Vertical alignment */
158
  verticalAlign?: 'top' | 'middle' | 'bottom';
159
  /** Icon size */
160
  iconSize?: number;
161
  /** Formatter function */
162
  formatter?: (value: any) => React.ReactNode;
163
  /** Wrapper styling */
164
  wrapperStyle?: React.CSSProperties;
165
}
166
```
167

168
### Layout Components
169

170
#### ResponsiveContainer
171

172
Responsive wrapper that automatically sizes charts to fit their container.
173

174
```typescript { .api }
175
/**
176
 * Responsive container for automatic chart sizing
177
 * @param props - Container configuration and sizing options
178
 * @returns React component providing responsive chart wrapper
179
 */
180
function ResponsiveContainer(props: ResponsiveContainerProps): JSX.Element;
181

182
interface ResponsiveContainerProps {
183
  /** Aspect ratio (width/height) */
184
  aspect?: number;
185
  /** Container width */
186
  width?: number | string;
187
  /** Container height */
188
  height?: number | string;
189
  /** Minimum width constraint */
190
  minWidth?: number;
191
  /** Minimum height constraint */
192
  minHeight?: number;
193
  /** Maximum height constraint */
194
  maxHeight?: number;
195
  /** Resize debounce delay in milliseconds */
196
  debounce?: number;
197
  /** Resize event handler */
198
  onResize?: (width: number, height: number) => void;
199
  /** Initial dimensions before measurement */
200
  initialDimension?: { width: number; height: number };
201
  /** Chart component children */
202
  children: React.ReactElement;
203
}
204
```
205

206
**Usage Example:**
207

208
```typescript
209
import { ResponsiveContainer, LineChart, Line } from 'recharts';
210

211
<ResponsiveContainer width="100%" height={400}>
212
  <LineChart data={data}>
213
    <Line dataKey="value" />
214
  </LineChart>
215
</ResponsiveContainer>
216
```
217

218
### Text and Labeling Components
219

220
#### Text
221

222
Advanced text component with word wrapping, scaling, and positioning capabilities.
223

224
```typescript { .api }
225
/**
226
 * Advanced text component with wrapping and scaling
227
 * @param props - Text configuration and styling options
228
 * @returns React component rendering SVG text with advanced features
229
 */
230
function Text(props: TextProps): JSX.Element;
231

232
interface TextProps extends React.SVGProps<SVGTextElement> {
233
  /** Scale text to fit available width */
234
  scaleToFit?: boolean;
235
  /** Text rotation angle in degrees */
236
  angle?: number;
237
  /** Text anchor alignment */
238
  textAnchor?: 'start' | 'middle' | 'end';
239
  /** Vertical text alignment */
240
  verticalAnchor?: 'start' | 'middle' | 'end';
241
  /** Available width for text */
242
  width?: number;
243
  /** Available height for text */
244
  height?: number;
245
  /** Break text at any character */
246
  breakAll?: boolean;
247
  /** Maximum number of lines */
248
  maxLines?: number;
249
  /** Text content */
250
  children?: React.ReactNode;
251
}
252
```
253

254
#### Label
255

256
Label component for annotations and data point labeling.
257

258
```typescript { .api }
259
/**
260
 * Label component for chart annotations and data labeling
261
 * @param props - Label configuration and positioning options
262
 * @returns React component rendering positioned labels
263
 */
264
function Label(props: LabelProps): JSX.Element;
265

266
interface LabelProps {
267
  /** View box for positioning calculations */
268
  viewBox?: { x?: number; y?: number; width?: number; height?: number };
269
  /** Label value to display */
270
  value?: string | number | React.ReactElement;
271
  /** Label position relative to target */
272
  position?: 'top' | 'left' | 'right' | 'bottom' | 'inside' | 'outside' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' | 'insideTopLeft' | 'insideTopRight' | 'insideBottomLeft' | 'insideBottomRight' | 'center';
273
  /** Position offset */
274
  offset?: number;
275
  /** Custom content component */
276
  content?: React.ComponentType<any> | React.ReactElement;
277
  /** Value formatter function */
278
  formatter?: (value: any) => string | number;
279
  /** CSS class name */
280
  className?: string;
281
}
282
```
283

284
#### LabelList
285

286
Component for batch labeling of multiple data points.
287

288
```typescript { .api }
289
/**
290
 * Label list component for batch labeling of data points
291
 * @param props - Label list configuration and data options
292
 * @returns React component rendering multiple labels
293
 */
294
function LabelList<T extends Record<string, any>>(props: LabelListProps<T>): JSX.Element;
295

296
interface LabelListProps<T> {
297
  /** Data array for label generation */
298
  data?: T[];
299
  /** Data key for label values */
300
  dataKey?: string | number | ((dataObject: T) => any);
301
  /** Value accessor function */
302
  valueAccessor?: (entry: T, index: number) => any;
303
  /** Custom label content */
304
  content?: React.ComponentType<any> | React.ReactElement;
305
  /** Label position */
306
  position?: 'top' | 'left' | 'right' | 'bottom' | 'inside' | 'outside' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' | 'center';
307
  /** Label angle */
308
  angle?: number;
309
  /** Value formatter */
310
  formatter?: (value: any) => string | number;
311
  /** Clock-wise positioning */
312
  clockWise?: boolean;
313
}
314
```
315

316
### Utility Components
317

318
#### Cell
319

320
Individual data cell component for customizing specific data points (used for prop passing).
321

322
```typescript { .api }
323
/**
324
 * Cell component for customizing individual data points
325
 * @param props - Cell styling and configuration
326
 * @returns null (component used for prop passing only)
327
 */
328
function Cell(props: CellProps): null;
329

330
interface CellProps extends React.SVGProps<SVGElement> {
331
  /** Any additional properties for styling individual cells */
332
  [key: string]: any;
333
}
334
```
335

336
**Usage Example:**
337

338
```typescript
339
import { PieChart, Pie, Cell } from 'recharts';
340

341
const COLORS = ['#0088FE', '#00C49F', '#FFBB28'];
342

343
<PieChart>
344
  <Pie data={data} dataKey="value">
345
    {data.map((entry, index) => (
346
      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
347
    ))}
348
  </Pie>
349
</PieChart>
350
```
351

352
#### Customized
353

354
Wrapper component for custom SVG elements within charts.
355

356
```typescript { .api }
357
/**
358
 * Customized component wrapper for custom SVG elements
359
 * @param props - Custom component configuration
360
 * @returns React component rendering custom SVG content
361
 */
362
function Customized<P = {}, C = React.ComponentType<P>>(props: CustomizedProps<P, C>): JSX.Element;
363

364
interface CustomizedProps<P, C> {
365
  /** Custom component to render */
366
  component: React.ReactElement<P> | React.FunctionComponent<P> | React.ComponentClass<P>;
367
}
368
```
369

370
### Container Components
371

372
#### Surface
373

374
Root SVG container component for chart rendering.
375

376
```typescript { .api }
377
/**
378
 * Surface component providing root SVG container
379
 * @param props - SVG container configuration
380
 * @returns React component rendering SVG root element
381
 */
382
function Surface(props: SurfaceProps): JSX.Element;
383

384
interface SurfaceProps extends React.SVGProps<SVGSVGElement> {
385
  /** SVG width */
386
  width?: number;
387
  /** SVG height */
388
  height?: number;
389
  /** SVG viewBox */
390
  viewBox?: string;
391
  /** SVG content */
392
  children?: React.ReactNode;
393
}
394
```
395

396
#### Layer
397

398
SVG group container for organizing chart elements.
399

400
```typescript { .api }
401
/**
402
 * Layer component providing SVG group container
403
 * @param props - SVG group configuration
404
 * @returns React component rendering SVG group element
405
 */
406
function Layer(props: LayerProps): JSX.Element;
407

408
interface LayerProps extends React.SVGAttributes<SVGGElement> {
409
  /** Group content */
410
  children?: React.ReactNode;
411
}
412
```