Skip to content
forked from recharts/recharts

Redefined chart library built with React and D3

License

Notifications You must be signed in to change notification settings

zykeee/recharts

This branch is 469 commits behind recharts/recharts:master.

Folders and files

NameName
Last commit message
Last commit date
Feb 17, 2023
Feb 3, 2023
Feb 14, 2023
Mar 17, 2020
Feb 16, 2023
Feb 17, 2023
Feb 16, 2023
Jan 9, 2023
Feb 8, 2016
Feb 14, 2023
Feb 1, 2023
Jan 23, 2021
Dec 8, 2022
Feb 21, 2018
Oct 12, 2022
Feb 3, 2023
Jan 27, 2023
Feb 17, 2023
Feb 17, 2023
Oct 15, 2021
Feb 10, 2023
Mar 12, 2020
Jan 12, 2023

Repository files navigation

Recharts

storybook Build Status Coverage Status npm version npm downloads MIT License

Introduction

Recharts is a Redefined chart library built with React and D3.

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

Please see the wiki for FAQ.

Examples

<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>

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.

# latest stable
$ npm install recharts

umd

The UMD build is also available on unpkg.com:

 <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>
 <script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>

Then you can find the library on window.Recharts.

dev build

$ 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:

$ 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

$ npm run[-script] storybook

and then browse to http://localhost:6006.

Module Formats

License

MIT

Copyright (c) 2015-2022 Recharts Group.

About

Redefined chart library built with React and D3

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.1%
  • Other 0.9%