README.md 5.1 KB
Newer Older
A
arcthur 已提交
1
# Recharts
A
arcthur 已提交
2

A
arcthur 已提交
3 4
[![Sponsors on Open Collective](https://opencollective.com/recharts/sponsors/badge.svg)](https://opencollective.com/recharts#sponsors)
[![Backers on Open Collective](https://opencollective.com/recharts/backers/badge.svg)](https://opencollective.com/recharts#backer)
S
Sergio Moreno 已提交
5
[![Build Status](https://github.com/recharts/recharts/workflows/Node.js%20CI/badge.svg)](https://github.com/recharts/recharts/actions)
A
arcthur 已提交
6 7 8
[![Coverage Status](https://coveralls.io/repos/recharts/recharts/badge.svg?branch=master&service=github)](https://coveralls.io/github/recharts/recharts?branch=master)
[![npm version](https://badge.fury.io/js/recharts.svg)](http://badge.fury.io/js/recharts)
[![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
A
arcthur 已提交
12

A
arcthur 已提交
13
Recharts is a **Redefined** chart library built with [React](https://facebook.github.io/react/) and [D3](http://d3js.org).
A
arcthur 已提交
14

X
Xiangyun Chi 已提交
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:
A
arcthur 已提交
16

P
Pier Roberto 已提交
17 18 19
1. **Simply** deploy with React components.
1. **Native** SVG support, lightweight depending only on some D3 submodules.
1. **Declarative** components, components of charts are purely presentational.
A
arcthur 已提交
20

A
arcthur 已提交
21 22
## Examples

23
```jsx
24 25 26
<LineChart
  width={400}
  height={400}
27 28 29
  data={data}
  margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
>
30
  <XAxis dataKey="name" />
A
arcthur 已提交
31
  <Tooltip />
32 33 34
  <CartesianGrid stroke="#f5f5f5" />
  <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
  <Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1} />
A
arcthur 已提交
35 36 37
</LineChart>
```

F
Fabian Kretzer 已提交
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.
A
arcthur 已提交
39

40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
## Installation

### npm

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.


```sh
# latest stable
$ npm install recharts
```

### umd

The UMD build is also available on unpkg.com:

```html
57 58
 <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
 <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
59 60 61 62 63 64 65 66 67 68 69 70 71 72
 <script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>
```

Then you can find the library on `window.Recharts`.

### dev build

```sh
$ git clone https://github.com/recharts/recharts.git
$ cd recharts
$ npm install
$ npm run build
```

73 74
## Demo

P
Pier Roberto 已提交
75
To examine the demos in your local build, execute:
X
xile611 已提交
76 77 78 79 80

```sh
$ npm run[-script] demo
```

P
Pier Roberto 已提交
81
and then browse to http://localhost:3000.
82

A
arcthur 已提交
83 84
## Module Formats

A
arcthur 已提交
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.
A
arcthur 已提交
86

A
arcthur 已提交
87
## Contribution
A
arcthur 已提交
88

F
Fabian Kretzer 已提交
89
We'd love :heart: to hear what you think we should build. Please create an issue to write your usage or ideas.
A
arcthur 已提交
90

Y
Yosef Herskovitz 已提交
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.
A
arcthur 已提交
92

A
arcthur 已提交
93 94 95 96 97
## Backers
[Become a backer](https://opencollective.com/recharts#backer) and get your image on our README on Github with a link to your site.

<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>
<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>
A
arcthur 已提交
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>
A
arcthur 已提交
99 100 101
<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>
<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>
<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>
N
Niklas Källander 已提交
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>
A
arcthur 已提交
103

A
arcthur 已提交
104 105 106 107
## Sponsoring

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!

A
arcthur 已提交
108 109 110 111
## License

[MIT](http://opensource.org/licenses/MIT)

112
Copyright (c) 2015-2021 Recharts Group.