Socket
Socket
Sign inDemoInstall

recharts

Package Overview
Dependencies
43
Maintainers
3
Versions
231
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

recharts

React charts


Version published
Maintainers
3
Weekly downloads
1,534,609
decreased by-7.38%

Weekly downloads

Package description

What is recharts?

Recharts is a composable charting library built on React components. It allows users to create various types of charts such as line, bar, area, pie, and more, using a declarative approach. It is easy to customize and extend, and it integrates well with the React ecosystem.

What are recharts's main functionalities?

LineChart

This code sample demonstrates how to create a simple LineChart with two lines, using the Recharts library. The chart includes a grid, axes, tooltips, and a legend.

{"import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';\nconst data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}];\n<LineChart width={600} height={300} data={data}><CartesianGrid strokeDasharray=\"3 3\"/><XAxis dataKey=\"name\"/><YAxis/><Tooltip/><Legend /><Line type=\"monotone\" dataKey=\"pv\" stroke=\"#8884d8\" /><Line type=\"monotone\" dataKey=\"uv\" stroke=\"#82ca9d\" /></LineChart>"}

BarChart

This code sample shows how to create a BarChart with two bars per data point. It includes similar features to the LineChart, such as a grid, axes, tooltips, and a legend.

{"import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';\nconst data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}];\n<BarChart width={600} height={300} data={data}><CartesianGrid strokeDasharray=\"3 3\"/><XAxis dataKey=\"name\"/><YAxis/><Tooltip/><Legend /><Bar dataKey=\"pv\" fill=\"#8884d8\" /><Bar dataKey=\"uv\" fill=\"#82ca9d\" /></BarChart>"}

PieChart

This code sample illustrates how to create a PieChart. It includes a Pie component with labels, a Tooltip for additional information on hover, and a Legend.

{"import { PieChart, Pie, Tooltip, Legend } from 'recharts';\nconst data = [{name: 'Group A', value: 400}, {name: 'Group B', value: 300}];\n<PieChart width={800} height={400}><Pie dataKey=\"value\" isAnimationActive={false} data={data} cx={200} cy={200} outerRadius={80} fill=\"#8884d8\" label /><Tooltip/><Legend /></PieChart>"}

Other packages similar to recharts

Readme

Source

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 and our storybook (WIP)

Please see the 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

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

Releases

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

Chromatic

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.

License

MIT

Copyright (c) 2015-2023 Recharts Group.

Keywords

FAQs

Last updated on 15 Mar 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc