recharts 's direct dependencies. Data on all dependencies, including transitive ones, is available via CSV download.| Name | Version | Size | License | Type | Vulnerabilities |
|---|---|---|---|---|---|
| classnames | 2.5.1 | 8.46 kB | MIT | prod | |
| eventemitter3 | 4.0.7 | 9.43 kB | MIT | prod | |
| lodash | 4.17.21 | 311.49 kB | MIT | prod | |
| prop-types | 15.8.1 | 22.12 kB | MIT | prod peer | |
| react-dom | 18.3.1 | 4.3 MB | MIT | prod peer | |
| react-is | 16.13.1 | 5.33 kB | MIT | prod | |
| react-resize-detector | 8.1.0 | 26.75 kB | MIT | prod | |
| react-smooth | 2.0.5 | 46.37 kB | MIT | prod | |
| react | 18.3.1 | 310.65 kB | MIT | prod peer | |
| recharts-scale | 0.4.5 | 34.44 kB | MIT | prod | |
| reduce-css-calc | 2.1.8 | 36.5 kB | MIT | prod | |
| victory-vendor | 36.9.2 | 396.84 kB | MIT AND ISC | prod |
Recharts is a redefined, noteworthy chart library constructed exclusively for React applications with the support of D3. This library aims to facilitate hassle-free chart creation in React apps. Adhering to key Recharts principles promises a simple deployment with React components, native SVG support that is weightless as it depends only on some D3 submodules, and declarative components, indicating that the components of charts are purely presentational.
To use Recharts, you can start by installing it via npm with the command npm install recharts, assuming npm has been already setup in your app. The Recharts library provides various chart components such as LineChart, XAxis, Tooltip, CartesianGrid etc. Each of these components is an independent React Component and they can be composed together to create a complete chart. Here's an example of how to create a LineChart using Recharts:
<LineChart
width={400}
height={400}
data={data}
margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
>
<XAxis dataKey="name" />
<Tooltip />
<CartesianGrid stroke="#f5f5f5" />
<Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
<Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1} />
</LineChart>
Here, LineChart is the main component that includes XAxis, Tooltip, CartesianGrid, and Line components. The data prop passed to LineChart is the datasource for the chart. The XAxis component defines the X-axis, Tooltip adds a tooltip for data, and the Lines define two lines drawn for 'uv' and 'pv' dataKeys from the data source.
The official documentation for Recharts is accessible at recharts.org. The documentation provides comprehensive guides and API references for understanding how to utilize Recharts. Additional information, including FAQs, can also be found in the official wiki of the Recharts GitHub repository.
