recharts / recharts

Redefined chart library built with React and D3

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-2023 Recharts Group.

recharts's Issues

fluid size

Awesome work,
Are there any plans to make charts adapt to the container size on resize? or is it a concern of the container component?

React 15.0 support

In React 15 you can now use native SVG properties, which means className becomes class, etc..

Current version of Recharts throws these warnings:
Warning: SVG property className is deprecated. Use the original attribute name class for SVG tags instead.

data coming from state can not update charts

http://jsfiddle.net/x1yoboc7/15/

Awesome

Would just like to say this library seems awesome.
Great job!

Feature request: animate on data change

Hello! First of all thanks for this excellent chart library!
A little thing that I'm missing is the option to animate again the chart when the underlying data change, to provide a visual feedback to the user when this happens.

Actually I've achieved this in an hacky way, by wrapping the chart in a component and force a full redraw of the chart by changing the component state inside the componentWillReceiveProps callback, but that's not an ideal solution.

Do you think this is a feature that could be implemented in the future?

Allow for specifying more interpolations (new feature).

Currently the curve types are restricted to 'linear', 'monotone', 'step', 'stepBefore' or 'stepAfter'. d3-shape supports more of them, so it might be a good idea to allow any of them to be specified.

My reasoning behind it is that recharts have already got a glorious API and it would be good to allow people to create more chart types based on it (I personally need the chord diagram).

ResponsiveContainer does not support fix height such as 200px

<ResponsiveContainer height={200}>
  <PieChart>
    {...}
  </PieChart>
</ResponsiveContainer>

This works nicely but React reports warning of
Invalid prop 'height' of type 'number' supplied to 'ResponsiveContainer', expected 'string'

If I change the height to <ResponsiveContainer height='200'> the container doesn't work.

I looked at the source code of ResponsiveContainer.js, the propType does require string. However the function it depends on in DataUtils.js, here is the core:

export const getPercentValue = (percent, totalValue, defaultValue = 0, validate = false) => {
  // ...
  const str = percent.toString();
  const index = str.indexOf('%');
  let value;

  if (index > 0) {
    value = totalValue * parseFloat(str.slice(0, index)) / 100;
  } else if (percent === +percent) {
    value = percent;
  }

Apparently my height '200' in string doesn't go into any of if branch so this function gives me a height of 0, but 200 in number works well.

Is there a way supporting 200px of height, and without propType warning?
Either a fix in getPercentValue or a change of propType would work for me.

Renaming groups in Legend/Tooltip

Hi

I haven't found anything about it in documentation, so I guess it isn't possible at the moment.

It would be useful to be able to change name in easy way of groups. Now they inherits labels from property name of data series.

In my case I need it to be translated for instance. Of course I can create new data series where I put new elements with changed keys, but in my opinion it's not good solution to this problem.

I think it would be good idea to send into Chart element array/object with mapped labels, something like, if I have values like:
[{name: 'A', x: 5, y: 7}, {name: 'B', x: 2, y: 6}, {name: 'C', x: 4, y: 4}, {name: 'D', x: 3, y: 1}]
I would like to send there something like this:
{x: 'My X value', y: 'My Y value'}

Server Side Rendering - nothing renders when using ResponsiveContainer

Hey,

i've been testing Recharts recently and jumped into few problems with server side rendering. I've tested a lot of different charting libraries for React and I would love to stop my search on recharts. Hope that we can fix SSR problems. I have very simple script with Simple Line Chart from example and use renderToString from react-dom/server. If you wish i can post it here or somewhere as a gist.

When adding ResponsiveContainer wrapper around LineChart it doesn't produce any output.

<div class="recharts-responsive-container" style="width:100%;height:100%;" data-reactid=".1zgxrmyubk0" data-react-checksum="1605641647"></div> this is all I have.

I believe I should have same output for server and client.

my code

      <ResponsiveContainer>
        <LineChart width={600} height={300} data={data}
              margin={{top: 5, right: 30, left: 20, bottom: 5}}>
           <Line type="monotone" dataKey="pv" stroke="#8884d8" />
           <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
        </LineChart>
      </ResponsiveContainer>

how to format axis' labels?

Suppose I want to have the numbers formatted as money, how would I do that?

Using Tooltip with Treemap?

Can you use Tooltip with Treemap? I can't find any place in the docs where it says which components can use Tooltip.

rename AdaptionWrapper to something more meaninful

A few options:
ResizableContainer, AutoResizeContainer, ResponsiveContainer

How to build?

When using 0.8.8 installed from NPM, everything works as expected.

When I clone the repo and build locally using npm install, npm run build and npm link, I get the following errors:

Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).(…)

and

Error: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).(…)

I think those errors are coming from ResponsiveContainer, but when I remove that from my app's code, I get:

React can't find the root component node for data-reactid value `.0.3.1.$appContent.$mainFeedContent.0.0.0.3.$dc627119-d8b6-4dd5-964a-bd69706b5faa.1.0.$=11.$1.0.0.5.1:$bar-0.0.$rectangle-0.0`. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.

Both errors reference multiple copies of React, so I'm think that has something to do with it, but I'm unsure how that is happening, especially if npm run build is the official way to build this.

Am I missing a step?

Multiple XY LineChart support

I really impressed by your work.
Is there any support for LineChart to generate lines with not equal sets of x coordinates?

Example: http://c3js.org/samples/simple_xy_multiple.html
Thanks!

Show the wrong tooltip.

When my pointer(indicated by the red point) is in the red rectangle, the tooltip of Page-B shows up. But I suppose that the tooltip of Page-B shows up when the pointer is in the the blue rectangle.

I am using Chrome 50 and edge on Windows.

如图, 当鼠标在红色框里面的时候, 将显示Page-B的提示工具. 不应该是鼠标在蓝色框的时候才显示Page-B的提示么?

pureRender totally useless

I just mentioned that shallowCompare method is totally useless for current version.
I slightly changed pureRender decorator to store information about results of shouldComponentUpdate.

window.perf = {};
function shouldComponentUpdate(nextProps, nextState) {
  var displayName = this.constructor.displayName;
  if (!window.perf[displayName]) {
    window.perf[displayName] = {
      yes: 0,
      no: 0
    }
  }

  var result = shallowCompare(this, nextProps, nextState);
  if (result) {
    window.perf[displayName].yes += 1;
  } else {
    window.perf[displayName].no += 1;
  }
  return result;
}

After render LineChart and mouseovering for a while I got results:

Line              yes: 1963      no: 1
Layer             yes: 3527      no: 0
Animate           yes: 1971      no: 0
Curve             yes: 2350      no: 0
Surface           yes: 2346      no: 0
CartesianGrid     yes: 391       no: 0
CartesianAxis     yes: 782       no: 0
Legend            yes: 782       no: 0
Tooltip           yes: 391       no: 0
DefaultTooltip    yes: 391       no: 0
Dot               yes: 1579      no: 316

The chart is almost totally rerender on any event yet it has the same data.

First of all, functions created in render should be refactored, cause it totally breaks pureRender.
More info here: https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.30axfnwr2
http://benchling.engineering/performance-engineering-with-react/

I tried to use another approach for some components and it works much faster:

function notDeepEqual(a, b) {
  return JSON.stringify(a) !== JSON.stringify(b);
}

...but I don't think that's a good solution.
guess we should find better way to deal with that problem...

Errors being thrown on data length changes and updates

First of all Awesome library. I am trying this chart, so far very impressed at the ease of use.

But the following errors

• line chart Cannot read property 'coord' of undefined is being thrown when data length increases. Tracked it down to getComposedData function in LineChart.js.
• Cannot read property 'getStyle' of null is being thrown when data is updated in handleStyleChange() function in Animate.js

This is my chart so far

<ResponsiveContainer>
  <LineChart data={data} margin={{ top: 15, right: 20, bottom: 5, left: 15 }}>
    <XAxis dataKey="date" strokeOpacity={0}/>
    <YAxis width={10} tickFormatter={() => {}} strokeOpacity={0}/>
    {
      graphs.map(g => (
        <Line
          key={g.name}
          {...g}
          label={<Labeler {...g} lastIndex={data.length - 1}/>}
          dot={g.dot !== false ? <Dotter {...g} /> : false }
        />
      ))
    }
   </LineChart>
</ResponsiveContainer>

Thank you

Legend is not responsive

I cant make horizontal legend to be responsive for LineChart.
I mean it would be nice to set height for LineChart and then chart would be use that height to recalculate height of Surface and Legend so height(Surface) + height(Legend) == props.height

For now Legend is just overlapping.
http://jsfiddle.net/fxtwg1k7/1/

why there is a block of blank on the left ?

i try to change the viewBox on svg,it can solve. Is there a better way to solve it ?

XAxis doesn't work with server side rendering

Hello
With client side - everything is working as it should, but when trying to render server side only part that was rendered is horizontal line - labels aren't visible.
Of course because of above problem there is also react warning in console that server side code is different than client side code.

Duplicate Data Keys along main axis cause a crash

Ideally I think both should be rendered side by side. I've tried digging into this to see if I could provide a fix but it looks like it's touching several parts of the library.

To replicate the error change line:
https://github.com/recharts/recharts/blob/master/demo/component/BarChart.js#L10
to:

{ name: 'food', uv: 3300, pv: 4567, amt: 6500 }

and try and view the barchart demo.

I'd be more than happy to try and put in the work here if someone could point me in the right direction of which pieces would need to be modified.

Server-side rendering?

I have been trying to render ComposedChart and BarChart from the server. The grid and axis get rendered but data content isn't. I see no error nor warnings. It is suppose to be working? I see no mention about server-side rendering at http://recharts.org/

Thanx

ResponsiveContainer invariant blows up tests

I am in the process of swapping out react-d3 in favor of recharts and everything has gone well up until the point that my tests ran.

When ResponsiveContainer is rendered with renderIntoDocument in my Karma tests (with karma-chrome-launcher), the invariant warning is thrown and my test blows up.

After digging in to it a bit, it appears that getComputedStyles, called from OuiDomUtils.width, is returning an object where all values are blank strings. This means that the width of the container element is essentially 0 which in turns causes the invariant to fail.

While I see why it would be desirable to want a container with a width greater than 0, is that any reason to blow up the render path?

AFAIK, having a 0-width (or -height) container element won't cause any errors to be thrown, so maybe it'd be better to go with a softer console.warn rather than a hard stop?

Short of removing the invariant, the only way I was able to get my tests to run was to re-write the test to use shallowRender (which is not something I really wanted to be forced to do 😕)

I was unable to find any way to get getComputedStyles to not return empty values so I have a feeling like the logic for ResponsiveContainer simply won't work in the context of Karma + Chrome. I even looked at your own tests and noted that you are using shallowRender (via enzyme) so you are likely not seeing this particular "feature"

Sorry if it seems like I'm complaining. Its a corner case (albeit a confusing one) and the rest of this lib seems pretty 💯. Thanks!

pie "slices" are all of the same color

It's very weird that the default config creates all slices with the same colors. For comparison, I'm adding two pie charts. The left one is recharts, the right one is from c3js.

Server Side rendering

When Rendering Charts Server-Side, it's showing all ticks on scale, but when rendering Client-Side, it's cutting them to about 7-8 ticks. Which version is broken? And, maybe it's possible to give a possibility to choose if you want to cut ticks, or maybe you want to draw them all?

ReferenceLine getting rendered out of the domain

When a reference line is present, the yaxis domain should include the ReferenceLine value. Right now the reference line get rendered out side the domain. See the screenshot where the goal value is at 10%

Server Side Rendering - path not visible due to stroke-dasharray

When rendering in server SVG Path is not visible when using LineChart (did not test other). If i use chrome devtools and remove stroke-dasharray: 0px 1px; from style it is visible again.

Implement axes labels

Seems like there is now way to set label for axis, which logically would mean 'units of measurement'.
Example:
http://c3js.org/samples/axes_label.html

LineChart switch curved

Hey,
I'm wondering if there is / will be a possibility to choose if lines are curved between points.
The default behaviour now seems to be true for horizontal and false for vertical.

CartesianGrid isn't visible in SSR

Hello
Again problem with SSR. :)
As stated it topic, server side rendering doesn't display grid.
As in previous case - this problem creates react warning in console that client side code is different from server side code.

Implement tooltip for PieChart

TickCount in XAxis doesnt'w work

Hello
When modifying tickCount nothing changes - there are always 6 ticks. Also as I checked code - default value for tickCount is 5, but it displays 6 ticks.

History dependency

I don't know why, but history keeps getting installed in recharts/node_modules folder, even though its only defined as a devdependency. Any ideas why? Am I the only one affected by this?

Positioning charts

Hello,

I'm currently trying out recharts to get to know it a little better before we use it at my job.
Currently I have 3 charts lined up and for the life of me I cannot seem to position them. I've attempted so far to position them using flex-box, margins, and padding but none of these seem to work.

I put all three of them in individual <ResponsiveContainer> components with their widths and heights set to 100% to see if it was proportions thing. I've ran out of ideas. Is there like a easy way to line them up and be proportioned equally that I may have overlooked?

Cannot import module

I've got the following error when tried to import recharts:

Module parse failed: D:\...\node_modules\recharts\src\index.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import 'ima.js-babel6-polyfill';
| import 'core-js/es6/math';
| import Surface from './container/Surface';

I think it happens because you have "main": "src/index.js" in package.json instead of "lib/index.js".

Question: Support for scaleTime?

I am trying to graph a time-series with recharts and thing will be better/simpler if I could use the D3 timeScale (x axis values are Date).

I look into the code to see where scale where set and I try to replace the scalePoint by scaleTime in getFormatAxisMap(). But it doesn't work (it would be too easy). It throw an error in getTicksOfAxis() because scaleTime obviously doesn't have the bandwidth method. I suppose that is far to be the only issue of changing the scale.

Do you have any idea if making the scale customizable or having an option to specify that we want a time scale on one of the axis will be difficult to implement?

Reduce size - don't depend on complete lodash lib

Recharts is currently the biggest library in my project. Its size could possibly be reduced by explicitly importing only those functions of lodash that are used.

See here: https://github.com/lodash/lodash/tree/npm

// Load a single method for smaller builds with browserify/rollup/webpack.
var chunk = require('lodash/chunk');
var extend = require('lodash/fp/extend');

Here is the stats for recharts (in my case)

recharts: 790.74 KB (24.7%)
  d3-scale: 126.08 KB (15.9%)
    d3-time-format: 27.13 KB (21.5%)
      <self>: 27.13 KB (100%)
    d3-array: 16.59 KB (13.2%)
      <self>: 16.59 KB (100%)
    d3-format: 14.26 KB (11.3%)
      <self>: 14.26 KB (100%)
    d3-color: 13.5 KB (10.7%)
      <self>: 13.5 KB (100%)
    d3-interpolate: 12.13 KB (9.62%)
      <self>: 12.13 KB (100%)
    d3-time: 10.38 KB (8.23%)
      <self>: 10.38 KB (100%)
    <self>: 32.1 KB (25.5%)
  lodash: 112.91 KB (14.3%)
    <self>: 112.91 KB (100%)
  d3-shape: 53.82 KB (6.81%)
    d3-path: 4.57 KB (8.50%)
      <self>: 4.57 KB (100%)
    <self>: 49.24 KB (91.5%)
  react-smooth: 42.3 KB (5.35%)
    raf: 2.61 KB (6.17%)
      performance-now: 886 B (33.1%)
        <self>: 886 B (100%)
      <self>: 1.75 KB (66.9%)
    pure-render-decorator: 722 B (1.67%)
      react-addons-shallow-compare: 53 B (7.34%)
        <self>: 53 B (100%)
      <self>: 669 B (92.7%)
    <self>: 38.98 KB (92.2%)
  recharts-scale: 16.34 KB (2.07%)
    <self>: 16.34 KB (100%)
  oui-dom-utils: 13.85 KB (1.75%)
    <self>: 13.85 KB (100%)
  core-js: 10.95 KB (1.38%)
    <self>: 10.95 KB (100%)
  invariant: 1.48 KB (0.187%)
    <self>: 1.48 KB (100%)
  classnames: 1.08 KB (0.136%)
    <self>: 1.08 KB (100%)
  ima.js-babel6-polyfill: 301 B (0.0372%)
    <self>: 301 B (100%)
  <self>: 411.65 KB (52.1%)

Latest version of React ?

I'm using React 0.14.3.
Could you please update the library to meet dependency version ?

customed payload is not word while Legend is in a Chart

http://jsfiddle.net/urt1d7v5/

I want to set payload={data1} but is doesn't work.

but this spec is work

https://github.com/recharts/recharts/blob/master/test/specs/component/LegendSpec.js

[RadarChart] "fullMark" property is not supported (deprecated?)

On the Radar Chart example page, the data array contains a fullMark property with a value of 150:

const data = [
    { subject: 'Math', A: 120, B: 110, fullMark: 150 },
    { subject: 'Chinese', A: 98, B: 130, fullMark: 150 },
    { subject: 'English', A: 86, B: 130, fullMark: 150 },
    { subject: 'Geography', A: 99, B: 100, fullMark: 150 },
    { subject: 'Physics', A: 85, B: 90, fullMark: 150 },
    { subject: 'History', A: 65, B: 85, fullMark: 150 },
];

Adding that property to my dataset did not seem to have any effect. Additionally, changing the maximum value in my array of data changed the rendering of all other data points.

It looks like fullMark has been deprecated in favor of domain: [0, 150 /* desired max value */] on PolarRadiusAxis.

If that is correct, a change to the example page is likely needed which I will gladly submit a PR for if desired.

load data dynamically by touchmove/drag(new feature?)

just like this

http://www.humblesoftware.com/flotr2/#!mouse-drag

but i can't find any event api

Can not import due to react-dom not found

Hi,

When adding recharts to a fairly simple React project and importing it as import x from 'recharts' I'm getting this error in my Webpack build.

ERROR in ./~/recharts/lib/component/Legend.js
Module not found: Error: Cannot resolve module 'node_modules/react-dom/dist/react-dom.min/server' in /Users/emiloberg/code/charttest/node_modules/recharts/lib/component
 @ ./~/recharts/lib/component/Legend.js 51:14-41

ERROR in ./~/recharts/lib/component/Tooltip.js
Module not found: Error: Cannot resolve module 'node_modules/react-dom/dist/react-dom.min/server' in /Users/emiloberg/code/charttest/node_modules/recharts/lib/component
 @ ./~/recharts/lib/component/Tooltip.js 47:14-41

I can't really figure out why (and not where that .min part comes from), but looking at the Legend.js and Tooltip.js files they're importing ReactDOM as:

import ReactDOMServer from 'react-dom/server';

That points to the source files.

Replacing the import lines in those two files with this line will solve the problem:

//import ReactDOMServer from 'react-dom/server';
import ReactDOMServer from 'react/lib/ReactDOMServer';

Please let me know what I can do to help debugging.

Custom components

Author of react-stockcharts here

I came across recharts a couple of weeks ago, and just today had a chance to read some source and play with the examples. When I looked at the API, it looked very similar to my project and was excited. Looking at the code of the different XXXChart I saw that you are limiting to a set of types you have created.

Take an example of http://jsfiddle.net/1n97rmsy/ where I have added a circle and rect on line 20 and 21, those are not displayed. It could be as simple as the user wanting a background text on the chart.

I believe it is essential to be able to support composition of custom components, at least for all the cartesian charts.

Props Name of ReferenceLine

Now I need to set three props ( type, value, xAxisId or yAxisId ) to describe a reference line. Just like:

  <ReferenceLine type="vertical" value="Page C" xAxisId={1} stroke="green" label="Min PAGE"/>
  <ReferenceLine type="horizontal" value={4000} yAxisId={1}  label="Max" stroke="red" strokeDasharray="3 3"/>

I think the props names are a bit obscure. And in order to be consistent , the value props of ReferenceDot (Planning Component) would be an object or a string:

  <ReferenceDot value={['someVal', 12]}  xAxisId={1}  yAxisId={2} stroke="green" label="Min PAGE"/>
  <ReferenceDot  value={{x: 'someVal', y: 12}} xAxisId={3} yAxisId={1}  label="Max" stroke="red" strokeDasharray="3 3"/>

Maybe we can describe a reference line like this:

  <ReferenceLine x="Page C" xAxisId={1} stroke="green" label="Min PAGE"/>
  <ReferenceLine y={4000} yAxisId={1}  label="Max" stroke="red" strokeDasharray="3 3"/>

It's just like we describe a horizontal line by y = 10;, or a vertical line by x = 1; in mathematics.
Then we can describe a reference dot similarly:

  <ReferenceDot x="Page C"  y={1000} stroke="green" label="Min PAGE"/>
  <ReferenceLine x="Page C" xAxisId={2}  y={1000} yAxisId={1}  label="Max" stroke="red" strokeDasharray="3 3"/>

@arcthur @VanthiyaThevan @bkniffler @Cloudo

Be confused about layout: "vertical" in BarChart

I had read the API and examples about BarChart and wanna to mix it into my project.
First, I copied the JS code from http://recharts.org/examples/#SimpleBarChart to my React Project. And I got the graph below.

Everything is ok. But after I made some changes...

<BarChart
    width={800}
    height={400}
    layout="vertical"
    data={data}
    margin={{top: 5, right: 30, left: 20, bottom: 5}}
>
    <XAxis />
    <YAxis type="category" dataKey="name" />

The uv is disappeared from Page A, and XAxis is totally wrong, obviously.
I was wondering if you could point out my configuration mistakes about layout: "vertical". I will be greatly appreciated.

Server side rendering - ReferenceError: window is not defined

Server side rendering of ResponsiveContainer doesn't currently work because of oui-dom-utils. I've filed an issue there oneuijs/oui-dom-utils#1

Maybe we can leave this one open, until the other one is resolved to keep track of it.

Here is a trace:

ReferenceError: window is not defined
 [app]/[recharts]/[oui-dom-utils]/build/index.js:10:29
ResponsiveContainer.js:24 Object.<anonymous>
[app]/[recharts]/lib/component/ResponsiveContainer.js:24:20

Server Side Rendering - document is not defined

When using Legend, Tooltip, XAxis, YAxis, CartesianGrid I have

var span = document.createElement('span');
ReferenceError: document is not defined

or

var wrapper = document.createElement('div');
ReferenceError: document is not defined

I understand that Tooltip has no sense in SSR but other components should render fine. When wrapping this around ResponsiveContainer I've got no error but also no output.

code to reproduce

        <LineChart width={600} height={300} data={data}
              margin={{top: 5, right: 30, left: 20, bottom: 5}}>
           <XAxis dataKey="name"/>
           <YAxis/>
           <CartesianGrid strokeDasharray="3 3"/>
           <Tooltip/>
           <Legend />
           <Line type="monotone" dataKey="pv" stroke="#8884d8" />
           <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
        </LineChart>

and
console.log(renderToString(<SimpleLineChart />));

Show label on ReferenceLine

Hey,
Having labels on xAxis, yAxis, Line etc. is very nice, but what about ReferenceLine? This would be important to have it work as an indicator with a text like 'Peek' or 'Maximum' or 'ROI' or whatever.

ResponsiveContainer improvement

I found a quite interesting implementation of component, which provide width and height to its children.
https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md

Its based on https://github.com/sdecima/javascript-detect-element-resize and as the docs say...

it not only detects javascript generated resize changes but also changes made from CSS pseudo classes e.g. :hover, CSS animations, etc.

You can see it in action here in Autosizer tab:
https://bvaughn.github.io/react-virtualized/

So i already have used AutoSizer in my project and it works perfectly!
I think I can make a PR a bit later.
What do you think?

how to custome XAxis label's position

i try to add css

.recharts-cartesian-axis-label {
        position: relative;
        left: -100px;
        top: -9999px;
        color:red;
    }

but it not work