recharts/react-smooth

react animation

Recharts

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

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

License

MIT

Copyright (c) 2015-2024 Recharts Group.

react-smooth's Issues

Using with npm shrinkwrap complains about extraneous: [email protected]

I am currently using recharts, but trying to lock versions with npm shrinkwrap on npm version 2.15.11 complains with the following error message extraneous: [email protected] /node_modules/react-smooth/node_modules/history

Repeated calls to `setState``

We updated react-smooth from 1.0.2 to 1.0.5 and started getting this error with treemaps:

Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at vendors.js:54289:28
    at checkForNestedUpdates (vendors.js:54292:7)
    at scheduleUpdateOnFiber (vendors.js:52563:3)
    at Object.enqueueSetState (vendors.js:44274:5)
    at Animate.Component.setState (vendors.js:71455:16)
    at Animate.componentDidUpdate (vendors.js:59325:14)
    at commitLifeCycles (vendors.js:51238:22)
    at commitLayoutEffects (vendors.js:53987:7)
    at HTMLUnknownElement.callCallback (vendors.js:31521:14)
    at Object.invokeGuardedCallbackDev (vendors.js:31571:16)

<Animate> componentWillReceiveProps should trigger state update immediatly

Currently <Animate/> 's componentWillReceiveProps will start the manager to load the animation. In which a setTimeout is added to change styles.

A common situation could be:

1. set <Animate> 's to -> state1, some static (out of the animation) value to -> value1

   Animate.state.style is state1 now

2. set <Animate>'s from -> state2, to -> state3, the static value -> value2

Now Animate.state.style is state1. Because the .state.style update is triggered in the animationManager in a setTimeout, so it will be updated after current react update loop.

So in this loop, the children state will be (value2, state1), which is not desirable( should be (value2, state2)).

I think it's better to trigger a state update in Animate.componentWillReceiveProps to set current state to
props.from, or maybe I've missed something?

Update simple example in README

<Animate to={0} from={1} attributeName="opacity">
  <div />
</Animate>

Should be this

<Animate to="0" from="1" attributeName="opacity">
  <div />
</Animate>

Based on this https://github.com/recharts/react-smooth/blob/master/src/Animate.js#L15 and this https://github.com/recharts/react-smooth/blob/master/src/Animate.js#L16

not working react 16

[email protected] requires a peer of react@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.

React 18 support

Recharts breaking our build

We currently use recharts in our project and after the lastest update of react-smooth, our build is breaking with the following error:

index.js:1Uncaught SyntaxError: Unexpected token import
...
import Animate from './Animate';

in react-smooth/lib/index.js

could you please have a look and release a patch.

thanks.

Uncaught Error: Cannot find module "react-transition-group/Transition"

Hey. After switching to react 16 and reinstalling dependencies I came across this error:

ERROR in ./node_modules/react-smooth/lib/AnimateGroupChild.js
Module not found: Error: Can't resolve 'react-transition-group/Transition' in
'\node_modules\react-smooth\lib'
@ ./node_modules/react-smooth/lib/AnimateGroupChild.js 21:18-62
@ ./node_modules/react-smooth/lib/AnimateGroup.js
@ ./node_modules/react-smooth/lib/index.js
@ ./node_modules/recharts/es6/polar/RadialBar.js
@ ./node_modules/recharts/es6/index.js
@ ./src/components/Dashboard/Main/index.js
@ ./src/components/Dashboard/index.js
@ ./src/components/App/index.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:5000 webpack/hot/dev-server babel-polyfill react react-dom ./src/index.js

I dug into the lib folder and saw you are trying to import from react-transition-group/Transition but when I changed it to import { Transition } from react-transition-group it started working.
Can you please investigate?

console.log statement in util.js causing IE9 grief

This line https://github.com/recharts/react-smooth/blob/master/src/util.js#L44
is causing IE9 to blow up.

SCRIPT438: Object doesn't support property or method 'bind'

You'd think you'd be able to polyfill bind or something and have that fix it, but I have not been able to make that work with a number of polyfills.

Replacing:
var log = exports.log = console.log.bind(console);

with:
var log = exports.log = function(){};

Fixes the issue.

It seems weird that you are exporting console.log as your log method.

easing bugs

1. easing 'spring' not support in steps, it will trigger a warning~
   like this

const steps = [{
  style: {
    opacity: 0,
  },
  duration: 400,
  easing: 'ease-in-out'
}, {
  style: {
    opacity: 1,
    transform: 'translate(0, 0)',
  },
  duration: 1000,
  easing: 'ease-out'
}, {
  style: {
    transform: 'translate(100px, 100px)',
  },
  duration: 1200,
  easing: 'spring'
}];

render() {
    return (
      <div className="simple">
        <button onClick={this.handleClick.bind(this)}>click me!</button>
        <Animate steps={steps} >
          <div style={{
                        width: 100,
                        height: 100,
                        backgroundColor: 'red'
                    }}
                    >
                    </div>
        </Animate>
      </div>
    );
  }

2. if use steps， children is a function，animation will not be properly implemented'
   like this

const steps = [{
  style: {
    opacity: 0,
  },
  duration: 400,
  easing: 'ease-in-out'
}, {
  style: {
    opacity: 1,
    transform: 'translate(0, 0)',
  },
  duration: 1000,
  easing: 'ease-out'
}, {
  style: {
    transform: 'translate(100px, 100px)',
  },
  duration: 1200,
  easing: 'ease-in'
}];

render() {
    return (
      <div className="simple">
        <button onClick={this.handleClick.bind(this)}>click me!</button>
        <Animate steps={steps} onAnimationEnd={()=>{console.log('aaa');}}>
           {
                   (json) => {
                        console.log(json);

                        return (
                              <div style={{
                                width: 100,
                                height: 100,
                                backgroundColor: 'red'
                                }}
                               >
                               </div>
                         );
                   }
            }
        </Animate>
      </div>
    );
  }

New object comparison using the "!==" operator is always true

Using esbuild to build a project that includes recharts gives the following warning:

▲ [WARNING] Comparison using the "!==" operator here is always true [equals-new-object]

    .wrangler/tmp/pages-LvycvA/functionsWorker-0.3826531471696346.mjs:42421:46:
      42421 │ ...ibuteName && [attributeName] !== from || !attributeName && s...
            ╵                                 ~~~

  Equality with a new object is always false in JavaScript because the equality operator tests object identity. You need to write code to compare the contents of the object instead. For example, use "Array.isArray(x) && x.length === 0" instead of "x === []" to test for an empty array.

I traced that code back to react-smooth's Animate component:

react-smooth/src/Animate.js

Lines 100 to 103 in 3ad17a7

	if ((attributeName && [attributeName] !== from) || (!attributeName && style !== from)) {
	// eslint-disable-next-line react/no-did-update-set-state
	this.setState(newState);
	}

Based on the git history, it looks like the intended code is this:

- if ((attributeName && [attributeName] !== from) || (!attributeName && style !== from)) {
+ if ((attributeName && style[attributeName] !== from) || (!attributeName && style !== from)) {

I don't know enough about this library to determine whether this logic bug has any practical impact.

Can it be used with recharts for custom animations ?

I am trying to animate Recharts components like ReferenceDot, ReferenceLine etc. can this library help in that ?
Since this is created by the same set of people, is there an easy integration between this and Recharts ?

react-addons-transition-group is deprecated

This package is deprecated and will no longer work with React 16+. We recommend you use TransitionGroup from react-transition-group instead. [source]

Short term alternative: react-transition-group

Update to react v17 support

This library currently doesn't have react v17 as a peer-dependency,

Therefore,
[email protected]" has incorrect peer dependency "react@^15.0.0 || ^16.0.0".
[email protected]" has incorrect peer dependency "react-dom@^15.0.0 || ^16.0.0".

So updating this is appreciated.

Package have React deprecation warnings

I thinks this actual for all src/*.js

Legend shows issue in recharts piechart with responsive container

I have tried working with responsive container in recharts using piechart and legend but this creates many issues like gettine "negative rect value" this value only becomes negative while you try to align legend to left or right. The piechart is not working responsive when I align Legend to left or right.




{dataStore.map((entry, index) => (
<Cell key={cell-${index}} fill={colors[index % colors.length]} />
))}

Avoid importing all of Lodash for only 2 functions

Currently the following files import the entire Lodash package:

• https://github.com/recharts/react-smooth/blob/8a771ed822a72e2f26fd84b08c1cba89216d16ee/src/Animate.js
• https://github.com/recharts/react-smooth/blob/af83bfc4a75e3c1ce1465ac0619002d8e8a19314/src/AnimateGroupChild.js

These could be refactored to the following respectively:

• import isEqual from 'lodash/isEqual';
• import isNumber from 'lodash/isNumber';

This would vastly cut down the bundle size of react-smooth in production. https://bundlephobia.com/[email protected]

Causes chart to prematurely stop rendering

There are some indications from users that Animations from react-smooth are causing the graph to render partially / in an incomplete state. Users have been using isAnimationActive={false} to disable animations to workaround the bug. See recharts issues:

recharts/recharts#1426
recharts/recharts#1821

Support react-transition-group 4.x

react-transition-group has evolved since version 2.5 (the one marked in package.json).

If someone with this library (or using recharts which requires this) is willing to use any new feature of RTG he will need two different versione of RTG.

Version 4.0.1 of RTG was released last year.

ease animation from right end of the screen

I wrote this using react-smooth which kind of works like a collapsible sidebar on the left

import React, { Component } from 'react';
import Animate from 'react-smooth';

class SimpleAnime extends Component {
  constructor(props) {
    super(props);

    this.state = {
      from : -400,
      to: -400
    };
  }

  handleClick() {
    if(this.state.to == this.state.from) {
      this.setState({
        from: -400,
        to: -5
      });
    }
    else {
      this.setState({
        from: this.state.to,
        to: this.state.from
      });
    }
  }

  render() {
    return (
      <div className="simple">
        <button onClick={this.handleClick.bind(this)}>click me!</button>
        <Animate from={{ x: this.state.from }} to={{ x: this.state.to }}>
          {({ x }) => (
            <div
              style={{
                width: 300,
                height: 800,
                backgroundColor: 'green',
                transform: `translate(${x}px, 0)`,
              }}
            >
            </div>
          )}
        </Animate>
      </div>
    );
  }
}

export default SimpleAnime;

How to make the collapsible sidebar on the right ?
I mean what values should to and from pros be given such that the div moves from right end to the width of div ?

Not working at all

I tried exactly same as Example, but it fails with:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `AnimatedComponent`.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `AnimatedComponent`.

This is the code:

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Animate } from 'react-smooth';

const steps = [
{
	style: {
		opacity: 0,
	},
	duration: 400,
}, 
{
	style: {
		opacity: 1,
		transform: 'translate(0, 0)',
	},
	duration: 1000,
}, 
{
	style: {
		transform: 'translate(100px, 100px)',
	},
	duration: 1200,
}];

class AnimatedComponent extends React.Component {
	render() {
		return (
			<Animate steps={steps}>
				<h1>Animate!</h1>
			</Animate>
		);
	}
}

ReactDOM.render(
	<AnimatedComponent />,
document.getElementById('entry'));

Using React 15.4 with Browserify 13.3.0 and react-smooth 0.1.20. How can I solve this?

ES6 Imports remain in build when requiring recharts via ES6

First off, thanks so much for this package, it's made so much of my working life easier with react + charts. :)

However, as of the most recent release of react-smooth, I seem to have hit an issue related to the module bundling and transforming changes.

ERROR in /main-60bfb053936fa59d6901.js from UglifyJs
SyntaxError: Unexpected token: name (Animate) [./~/recharts/~/react-smooth/lib/index.js:1,0]

We import specific charts that we need as ES6 imports, as in import { Surface, Symbols } from 'recharts';

We're running this through UglifyJS, and hitting a syntax error with "Animate" as shown above, in browser that translates to an unexpected token 'import' error. This is the index.js file as required by recharts@^0.20.2.

function(module, exports) {
	import Animate from './Animate';
	import { configBezier, configSpring } from './easing';
	import { translateStyle } from './util';
	import AnimateGroup from './AnimateGroup';
	
	export { configSpring, configBezier, AnimateGroup, translateStyle };
	
	export default Animate;
}

I noticed the recent es6 import changes to the release, and our build broke ~ 2 hours ago, around the time the new version was tagged, so I'm guessing these two things are related.

Quick fix would be pinning the version of react-smooth that recharts uses to 0.1.17, and updating that once a build process fix is found, (I've had a look around, but I'm not sure what winds up getting published to npm/required by the main 'recharts' package. If all else fails I'll fork the main package and pin the dependency and keep an eye out for an upstream fix).

Latest version 1.0.1 has a syntax error and will not run

Can be seen using npm run kit here
https://npm.runkit.com/react-smooth

from our build

D:\\node_modules\react-smooth\lib\index.js:1
--
02-Oct-2018 16:15:29 | ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Animate from './Animate';
02-Oct-2018 16:15:29 | ^^^^^^
02-Oct-2018 16:15:29 |  
02-Oct-2018 16:15:29 | SyntaxError: Unexpected token import
02-Oct-2018 16:15:29 |  
02-Oct-2018 16:15:29 | at transformAndBuildScript (node_modules\jest-runtime\build\transform.js:321:12)
02-Oct-2018 16:15:29 | at Object.<anonymous> (node_modules\recharts\lib\component\Tooltip.js:12:20)
02-Oct-2018 16:15:29 | at Object.<anonymous> (node_modules\recharts\lib\index.js:291:40)

Animation breaks because of NaN in easing

The chart animation breaks sometimes in my ui, when unmounting and mounting frequently.

I narrowed it down to this function, in easing.js:

var multyTime = function multyTime(params, t) {
  return params.map(function (param, i) {
    return param * Math.pow(t, i);
  }).reduce(function (pre, curr) {
    return pre + curr;
  });

When this function is supplied with these arguments, it returns NaN:

This NaN value eventually pass all the way up to renderVerticalRect in Area.js, at which point an error occurs.

For now, I avoid the problem by just adding a check inside multyTime, which replaces NaN with 0. But it would be good to have some fix in the master repo.

EDIT

Interesting. So while the arguments above were indeed the exact values used when the NaN was produced, when running it again as a watch or in the console (while paused in the debugger), it does not return NaN.

However, when I run a loop, running that exact same line, it does produce NaN!

Not only that: the loop has to have a certain number of loops to trigger it!

I used binary search, and narrowed it down to a single number: 8942

In other words, when I run the following, "NaN produced!" is output to the console:

for (var i = 0; i < 8942; i++) {
    if (Number.isNaN(multyTime([0,0.30000000000000004,2.4,-1.7000000000000002], 0.9196919176875596)))
        console.log("NaN produced!");
}

But when I run this next version, "NaN produced!" is not output to the console:

for (var i = 0; i < 8941; i++) {
    if (Number.isNaN(multyTime([0,0.30000000000000004,2.4,-1.7000000000000002], 0.9196919176875596)))
        console.log("NaN produced!");
}

And this is completely repeatable. I did it back and forth many times, and it always triggers when the loop-count is 8942 or over, and never when it's under.

EDIT2

Okay, I did further testing by running the above, not while paused in the debugger, but just calling multyTime from the console. There, the issue above is not present. Instead, "NaN produced" is never produced, even when it's run with a loop-count of 10,000,000. So something weird was going on there.

EDIT3

Okay, I finally reproduced the problem to something that you can just paste into a console window (for example, on this page), and see the NaN result. Here it is:

// if you decrease the loop-count by even one, the `NaN` will not appear
// (possibly it's platform-dependent, so try a higher number if you don't get the NaN detection + log right away)
for (var i = 0; i < 6086; i++) { 
    var params = [0,0.75,-.75,1];
    var t = 0;
    var result1 = params.map(function(param, i) {
        return param * Math.pow(t, i);
    });
    var result2 = result1.reduce(function(pre, curr) {
        return pre + curr;
    });
    if (Number.isNaN(result2)) {
        console.log("NaN produced at loop: " + i);
        break;
    }
}

Once the NaN was produced, I then checked the value of result1 and result2.

result1: [0, 0, -0, 0]
result2: NaN

Interesting.

However, when I re-ran the code that gave result2's NaN:

result1.reduce(function (pre, curr) {
    return pre + curr;
});

It returned 0.

So, it seems to be a strange and rare bug in Chrome, that only happens when you run a particular sequence of code many times in a row. But at least it's reproducible! So I should be able to submit a bug report, and hopefully they'll make a fix eventually.

Anyway, given that this bug does exist (you can try it right now to verify), and that it sometimes happens in actual usage of this library, should there perhaps be some sort of handling for it to prevent the resulting animation-breakage issue?

Technical info

OS Name: Microsoft Windows 10 Pro
Version: 10.0.14393 Build 14393
System Type: x64-based PC
Processor: AMD FX(tm)-8320 Eight-Core Processor, 3500 Mhz, 4 Core(s), 8 Logical Processor(s)

Chrome: "Version 59.0.3063.4 (Official Build) dev (64-bit)"

Note: I tried the code above (also with a higher loop-count), and the error was not reproduced in Chromium, Firefox, or Edge.
Scratch that: the error is reproduced in Chromium, I just needed to update it to the latest version. (from "Version 59.0.3053.0 (Official Build) (64-bit)" to "Version 59.0.3060.0 (Official Build) (64-bit)")

Good, so now we even know what update range introduced the problem. Now time to make the Chrome/Chromium bug-report...