Skip to content

recharts/recharts

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

…3612)

<!--- Provide a general summary of your changes in the Title above -->

## Description

<!--- Describe your changes in detail -->
When using `ErrorBar` in a stacked bar chart, the error bars do no
appear. Refactor types to correctly reflect what could happen. Fix bug
in the `Bar` `dataPointFormatter`

This _might_ be considered a breaking change because of the type changes
of `dataPointFormatter`? I don't really know though... I would have to
create an example of how it would break someone to see how intrusive it
might be. If it does break someone it will direct them to the correct
way of using `dataPointFormatter`...

## Related Issue

<!--- This project only accepts pull requests related to open issues -->
<!--- If suggesting a new feature or change, please discuss it in an
issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps
to reproduce -->
<!--- Please link to the issue here: -->
#2585

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
Fix a bug that has been around for a while. It is caused by this line of
code
https://github.com/recharts/recharts/blob/master/src/cartesian/Bar.tsx#L235
- this causes `value` to be a `[number, number]` when a chart is
stacked.

## How Has This Been Tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->
Uncover the bug via failing unit test (no x values in rendered ErrorBar
lines pre-change) and refactor until the test passes.


## Screenshots (if appropriate):

Before (see left side):
<img width="1292" alt="image"
src="https://github.com/recharts/recharts/assets/25180830/2717c26a-ae85-4be3-98b1-1acf6a29011e">


After:
<img width="1306" alt="image"
src="https://github.com/recharts/recharts/assets/25180830/da727df6-7daf-42fb-babd-b0427c4ff3bc">

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [X] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [x] I have added tests to cover my changes.
- [x] All new and existing tests passed.

Co-authored-by: Coltin Kifer <ckifer@amazon.com>
5fc0394

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

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.

Module Formats

License

MIT

Copyright (c) 2015-2023 Recharts Group.