0
# Recharts
1

2
Recharts is a comprehensive React charting library built with React and D3, designed to simplify chart creation in React applications through declarative, composable components. It provides native SVG support with minimal dependencies and offers a wide range of chart types including line charts, bar charts, area charts, pie charts, and more complex visualizations.
3

4
## Package Information
5

6
- **Package Name**: recharts
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install recharts`
10

11
## Core Imports
12

13
```typescript
14
import { 
15
  LineChart, BarChart, PieChart, AreaChart, ScatterChart,
16
  XAxis, YAxis, ZAxis, CartesianGrid,
17
  Tooltip, Legend, ResponsiveContainer,
18
  Line, Bar, Area, Scatter, Pie,
19
  Cell, ReferenceLine
20
} from "recharts";
21
```
22

23
For CommonJS:
24

25
```javascript
26
const { LineChart, BarChart, PieChart, XAxis, YAxis } = require("recharts");
27
```
28

29
## Basic Usage
30

31
```typescript
32
import React from 'react';
33
import {
34
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
35
} from 'recharts';
36

37
const data = [
38
  { name: 'Jan', value: 400 },
39
  { name: 'Feb', value: 300 },
40
  { name: 'Mar', value: 600 },
41
  { name: 'Apr', value: 800 },
42
];
43

44
function MyChart() {
45
  return (
46
    <ResponsiveContainer width="100%" height={400}>
47
      <LineChart data={data}>
48
        <CartesianGrid strokeDasharray="3 3" />
49
        <XAxis dataKey="name" />
50
        <YAxis />
51
        <Tooltip />
52
        <Legend />
53
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
54
      </LineChart>
55
    </ResponsiveContainer>
56
  );
57
}
58
```
59

60
## Architecture
61

62
Recharts follows a declarative, component-based architecture with several key design patterns:
63

64
- **Compositional Design**: Charts are built by combining independent components (axes, grids, data series, tooltips)
65
- **Data-Driven**: All components accept `data` props and use `dataKey` to specify which data fields to visualize
66
- **SVG-First**: Native SVG rendering with full customization through SVG properties
67
- **Responsive**: Built-in responsive capabilities with `ResponsiveContainer`
68
- **Type Safety**: Full TypeScript support with generic type parameters for data shapes
69
- **Animation**: Configurable animations for smooth transitions and interactions
70

71
## Capabilities
72

73
### Chart Components
74

75
Complete chart solutions for different data visualization needs, including Cartesian charts (LineChart, BarChart, AreaChart), polar charts (PieChart, RadarChart), and specialized visualizations (Treemap, Sankey).
76

77
```typescript { .api }
78
// Cartesian Charts
79
function LineChart(props: CartesianChartProps): JSX.Element;
80
function BarChart(props: CartesianChartProps): JSX.Element;
81
function AreaChart(props: CartesianChartProps): JSX.Element;
82

83
// Polar Charts  
84
function PieChart(props: PolarChartProps): JSX.Element;
85
function RadarChart(props: PolarChartProps): JSX.Element;
86

87
interface CartesianChartProps {
88
  data: any[];
89
  width?: number | string;
90
  height?: number | string;
91
  margin?: { top?: number; right?: number; bottom?: number; left?: number };
92
  layout?: 'vertical' | 'horizontal';
93
  children?: React.ReactNode;
94
}
95
```
96

97
[Chart Components](./charts.md)
98

99
### UI Components
100

101
Essential UI components for interactive functionality including tooltips, legends, labels, and responsive containers that enhance chart usability and presentation.
102

103
```typescript { .api }
104
function Tooltip<TValue = any, TName = any>(props: TooltipProps<TValue, TName>): JSX.Element;
105
function Legend(props: LegendProps): JSX.Element;
106
function ResponsiveContainer(props: ResponsiveContainerProps): JSX.Element;
107

108
interface TooltipProps<TValue, TName> {
109
  active?: boolean;
110
  content?: React.ComponentType<any> | React.ReactElement;
111
  cursor?: boolean | React.SVGProps<SVGElement>;
112
  animationDuration?: number;
113
}
114
```
115

116
[UI Components](./components.md)
117

118
### Cartesian Components
119

120
Components for Cartesian coordinate system including axes (XAxis, YAxis, ZAxis), data series (Line, Bar, Area, Scatter), grid systems, and reference elements for marking specific values or ranges.
121

122
```typescript { .api }
123
function XAxis(props: XAxisProps): JSX.Element;
124
function YAxis(props: YAxisProps): JSX.Element;
125
function Line(props: LineProps): JSX.Element;
126
function Bar(props: BarProps): JSX.Element;
127

128
interface XAxisProps {
129
  xAxisId?: string | number;
130
  dataKey?: string | number | ((dataObject: any) => any);
131
  type?: 'number' | 'category';
132
  domain?: [any, any] | ((dataMin: any, dataMax: any) => [any, any]);
133
}
134
```
135

136
[Cartesian Components](./cartesian-components.md)
137

138
### Polar Components
139

140
Components for polar coordinate system including polar axes (PolarAngleAxis, PolarRadiusAxis), data series (Pie, Radar, RadialBar), and polar grid systems for circular data visualizations.
141

142
```typescript { .api }
143
function PolarAngleAxis(props: PolarAngleAxisProps): JSX.Element;
144
function Pie(props: PieProps): JSX.Element;
145
function Radar(props: RadarProps): JSX.Element;
146

147
interface PieProps {
148
  dataKey: string | number | ((dataObject: any) => any);
149
  cx?: number | string;
150
  cy?: number | string;
151
  innerRadius?: number | string;
152
  outerRadius?: number | string;
153
}
154
```
155

156
[Polar Components](./polar-components.md)
157

158
### Shape Components
159

160
Primitive shape components for custom visualizations including rectangles, sectors, dots, curves, and symbols that can be used to build custom chart elements.
161

162
```typescript { .api }
163
function Rectangle(props: RectangleProps): JSX.Element;
164
function Sector(props: SectorProps): JSX.Element;
165
function Dot(props: DotProps): JSX.Element;
166

167
interface RectangleProps extends React.SVGProps<SVGPathElement> {
168
  x?: number;
169
  y?: number;
170
  width?: number;
171
  height?: number;
172
  radius?: number | [number, number, number, number];
173
}
174
```
175

176
[Shape Components](./shapes.md)
177

178
### Hooks and Utilities
179

180
React hooks for accessing chart state and utility functions for custom chart development, including tooltip data access, chart layout information, and scale utilities.
181

182
```typescript { .api }
183
function useActiveTooltipLabel(): string | undefined;
184
function useOffset(): ChartOffset | undefined;
185
function usePlotArea(): PlotArea | undefined;
186
function useActiveTooltipDataPoints<T = unknown>(): ReadonlyArray<T> | undefined;
187
function useChartWidth(): number | undefined;
188
function useChartHeight(): number | undefined;
189
function getNiceTickValues(domain: [number, number], tickCount?: number, allowDecimals?: boolean): number[];
190

191
interface ChartOffset {
192
  readonly top: number;
193
  readonly bottom: number;
194
  readonly left: number;
195
  readonly right: number;
196
}
197
```
198

199
[Hooks and Utilities](./hooks-utilities.md)
200

201
## Core Types
202

203
```typescript { .api }
204
interface ChartOffset {
205
  readonly top: number;
206
  readonly bottom: number;
207
  readonly left: number;
208
  readonly right: number;
209
}
210

211
interface PlotArea {
212
  readonly width: number;
213
  readonly height: number;
214
  readonly x: number;
215
  readonly y: number;
216
}
217

218
type LegendType = 'circle' | 'cross' | 'diamond' | 'line' | 'plainline' | 'rect' | 'square' | 'star' | 'triangle' | 'wye' | 'none';
219
```