Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/recharts/recharts
Redefined chart library built with React and D3
https://github.com/recharts/recharts
chart charting-library components d3 data-visualisation javascript react recharts typescript ui
Last synced: 3 days ago
JSON representation
Redefined chart library built with React and D3
- Host: GitHub
- URL: https://github.com/recharts/recharts
- Owner: recharts
- License: mit
- Created: 2015-08-07T06:50:27.000Z (over 9 years ago)
- Default Branch: 3.x
- Last Pushed: 2024-11-29T16:00:07.000Z (13 days ago)
- Last Synced: 2024-11-30T15:57:17.822Z (12 days ago)
- Topics: chart, charting-library, components, d3, data-visualisation, javascript, react, recharts, typescript, ui
- Language: TypeScript
- Homepage: http://recharts.org
- Size: 29.8 MB
- Stars: 24,176
- Watchers: 176
- Forks: 1,718
- Open Issues: 441
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-react-cn - recharts - Redefined chart library built with React and D3 (Uncategorized / Uncategorized)
- awesome - recharts/recharts - Redefined chart library built with React and D3 (TypeScript)
- awesome-react-components-all - recharts - Redefined chart library built with React and D3. (Uncategorized / Uncategorized)
- awesome-react-components - recharts - Redefined chart library built with React and D3. (UI Components / Chart)
- awesome-d3 - recharts - Re-designed charting library built with React (Charts)
- awesome-react - Recharts - A charting library built on D3 with an awesome declarative API
- awesome-react - recharts - Redefined chart library built with React and D3. ![](https://img.shields.io/github/stars/recharts/recharts.svg?style=social&label=Star) (UI Components / Data Visualization)
- awesome-ccamel - recharts/recharts - Redefined chart library built with React and D3 (TypeScript)
- awesome-learning-resources - recharts - Redefined chart library built with React and D3 (Uncategorized / Uncategorized)
- awesome-github-star - recharts
- awesome-d3 - recharts - Re-designed charting library built with React (Charts)
- awesome-list - recharts - Redefined chart library built with React and D3. (Demos / Chart)
- awesome-react-components - recharts - Redefined chart library built with React and D3. (UI Components / Chart)
- awesome-react-components - recharts - Redefined chart library built with React and D3. (UI Components / Chart)
- awesome-list - recharts
- awesome-react-components - recharts - Redefined chart library built with React and D3. (UI Components / Chart)
- best-of-react - GitHub - 17% open · ⏱️ 05.06.2024): (Data Visualization)
- fucking-awesome-react-components - recharts - Redefined chart library built with React and D3. (UI Components / Chart)
- StarryDivineSky - recharts/recharts
- awesome - recharts / recharts - react (数据可视化)
- awesome-javascript - recharts - Redefined chart library built with React and D3 - ★ 10289 (Data Visualization)
- awesome-react-cn - recharts
- awesome-react - recharts - Redefined chart library built with React and D3 (**Awesome React** [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) / React)
- awesome-d3 - recharts - Re-designed charting library built with React (Charts)
- starred-awesome - recharts - Redefined chart library built with React and D3 (JavaScript)
- awesome - recharts - Redefined chart library built with React and D3 (JavaScript)
- jimsghstars - recharts/recharts - Redefined chart library built with React and D3 (TypeScript)
- awesome-react - recharts - Redefined chart library built with React and D3 ` 📝 2 months ago` (React [🔝](#readme))
- awesome - recharts/recharts - Redefined chart library built with React and D3 (TypeScript)
README
# Recharts
[![storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)](https://release--63da8268a0da9970db6992aa.chromatic.com/)
[![Build Status](https://github.com/recharts/recharts/workflows/Node.js%20CI/badge.svg)](https://github.com/recharts/recharts/actions)
[![codecov](https://codecov.io/gh/recharts/recharts/graph/badge.svg?token=Bn6L2hrl8T)](https://codecov.io/gh/recharts/recharts)
[![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)
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE)## Introduction
Recharts is a **Redefined** chart library built with [React](https://facebook.github.io/react/) and [D3](http://d3js.org).
The main purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:
1. **Simply** deploy with React components.
2. **Native** SVG support, lightweight depending only on some D3 submodules.
3. **Declarative** components, components of charts are purely presentational.Documentation at [recharts.org](https://recharts.org) and our [storybook (WIP)](https://release--63da8268a0da9970db6992aa.chromatic.com/)
Please see [the wiki](https://github.com/recharts/recharts/wiki) for FAQ.
All development is done on the `master` branch. The current latest release and storybook documentation reflects what is on the `release` branch.
## Examples
```jsx
```
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.
## 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 react-is
````react-is` needs to match the version of your installed `react` package.
### umd
The UMD build is also available on unpkg.com:
```html
```
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
```## Demo
To examine the demos in your local build, execute:
```sh
$ npm run[-script] demo
```and then browse to http://localhost:3000.
## Storybook
We are in the process of unifying documentation and examples in storybook. To run it locally, execute
```sh
$ npm run[-script] storybook
```and then browse to http://localhost:6006.
## Releases
[Releases](https://github.com/recharts/recharts/releases) are automated via GH Actions - when a new release is created in GH, CI will trigger that:
1. Runs a build
2. Runs tests
3. Runs `npm publish`Version increments and tagging are not automated at this time.
### Release testing
Until we can automate more, it should be preferred to test as close to the results of `npm publish` as we possibly can. This ensures we don't publish unintended breaking changes. One way to do that is using `yalc` - `npm i -g yalc`.
1. Make your changes in recharts
2. `yalc publish` in recharts
3. `yalc add recharts` in your test package (ex: in a vite or webpack reach app with recharts installed, imported, and your recent changes used)
4. `npm install`
5. Test a local run, a build, etc.## Module Formats
- [babel-plugin-recharts](https://github.com/recharts/babel-plugin-recharts) A simple transform to cherry-pick Recharts modules so you don’t have to. **Note: this plugin is out of date and may not work with 2.x**
## Thanks
Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2015-2024 Recharts Group.