1 | # Recharts
|
2 |
|
3 | [![Sponsors on Open Collective](https://opencollective.com/recharts/sponsors/badge.svg)](https://opencollective.com/recharts#sponsors)
|
4 | [![Backers on Open Collective](https://opencollective.com/recharts/backers/badge.svg)](https://opencollective.com/recharts#backer)
|
5 | [![Build Status](https://github.com/recharts/recharts/workflows/Node.js%20CI/badge.svg)](https://github.com/recharts/recharts/actions)
|
6 | [![Coverage Status](https://coveralls.io/repos/recharts/recharts/badge.svg?branch=master&service=github)](https://coveralls.io/github/recharts/recharts?branch=master)
|
7 | [![npm version](https://badge.fury.io/js/recharts.svg)](http://badge.fury.io/js/recharts)
|
8 | [![npm downloads](https://img.shields.io/npm/dm/recharts.svg?style=flat-square)](https://www.npmjs.com/package/recharts)
|
9 | [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE)
|
10 |
|
11 | ## Introduction
|
12 |
|
13 | Recharts is a **Redefined** chart library built with [React](https://facebook.github.io/react/) and [D3](http://d3js.org).
|
14 |
|
15 | The main purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:
|
16 |
|
17 | 1. **Simply** deploy with React components.
|
18 | 1. **Native** SVG support, lightweight depending only on some D3 submodules.
|
19 | 1. **Declarative** components, components of charts are purely presentational.
|
20 |
|
21 | ## Examples
|
22 |
|
23 | ```jsx
|
24 | <LineChart
|
25 | width={400}
|
26 | height={400}
|
27 | data={data}
|
28 | margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
|
29 | >
|
30 | <XAxis dataKey="name" />
|
31 | <Tooltip />
|
32 | <CartesianGrid stroke="#f5f5f5" />
|
33 | <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
|
34 | <Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1} />
|
35 | </LineChart>
|
36 | ```
|
37 |
|
38 | All the components of Recharts are clearly separated. The lineChart is composed of x axis, tooltip, grid, and line items, and each of them is an independent React Component. The clear separation and composition of components is one of the principle Recharts follows.
|
39 |
|
40 | ## Installation
|
41 |
|
42 | ### npm
|
43 |
|
44 | NPM is the easiest and fastest way to get started using Recharts. It is also the recommended installation method when building single-page applications (SPAs). It pairs nicely with a CommonJS module bundler such as Webpack.
|
45 |
|
46 |
|
47 | ```sh
|
48 | # latest stable
|
49 | $ npm install recharts
|
50 | ```
|
51 |
|
52 | ### umd
|
53 |
|
54 | The UMD build is also available on unpkg.com:
|
55 |
|
56 | ```html
|
57 | <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
|
58 | <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
|
59 | <script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>
|
60 | ```
|
61 |
|
62 | Then you can find the library on `window.Recharts`.
|
63 |
|
64 | ### dev build
|
65 |
|
66 | ```sh
|
67 | $ git clone https://github.com/recharts/recharts.git
|
68 | $ cd recharts
|
69 | $ npm install
|
70 | $ npm run build
|
71 | ```
|
72 |
|
73 | ## Demo
|
74 |
|
75 | To examine the demos in your local build, execute:
|
76 |
|
77 | ```sh
|
78 | $ npm run[-script] demo
|
79 | ```
|
80 |
|
81 | and then browse to http://localhost:3000.
|
82 |
|
83 | ## Module Formats
|
84 |
|
85 | - [babel-plugin-recharts](https://github.com/recharts/babel-plugin-recharts) A simple transform to cherry-pick Recharts modules so you don’t have to.
|
86 |
|
87 | ## Contribution
|
88 |
|
89 | We'd love :heart: to hear what you think we should build. Please create an issue to write your usage or ideas.
|
90 |
|
91 | We are looking for like-minded people who share the same idea about Recharts. The goal of this project is to create a more flexible charting library for the React community.
|
92 |
|
93 | ## Backers
|
94 | [Become a backer](https://opencollective.com/recharts#backer) and get your image on our README on Github with a link to your site.
|
95 |
|
96 | <a href="https://opencollective.com/recharts/backer/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/recharts/backer/0/avatar.svg?requireActive=false"></a>
|
97 | <a href="https://opencollective.com/recharts/backer/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/recharts/backer/1/avatar.svg?requireActive=false"></a>
|
98 | <a href="https://opencollective.com/recharts/backer/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/recharts/backer/2/avatar.svg?requireActive=false"></a>
|
99 | <a href="https://opencollective.com/recharts/backer/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/recharts/backer/3/avatar.svg?requireActive=false"></a>
|
100 | <a href="https://opencollective.com/recharts/backer/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/recharts/backer/4/avatar.svg?requireActive=false"></a>
|
101 | <a href="https://opencollective.com/recharts/backer/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/recharts/backer/5/avatar.svg?requireActive=false"></a>
|
102 | <a href="https://opencollective.com/recharts/backer/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/recharts/backer/6/avatar.svg?requireActive=false"></a>
|
103 |
|
104 | ## Sponsoring
|
105 |
|
106 | Most of the core team members do this open source work in their free time. If you use recharts for a important work, and you'd like us to invest more time on it, please [donate](https://opencollective.com/recharts#sponsors). Thanks!
|
107 |
|
108 | ## License
|
109 |
|
110 | [MIT](http://opensource.org/licenses/MIT)
|
111 |
|
112 | Copyright (c) 2015-2021 Recharts Group.
|