Hi everyone, in my project I'm trying to achieve something like in the image below, where the tooltip is rendered just above the point it refers to.

Looking at the props the custom tooltip receives, coordinates follow the mouse cursor. Is there a way to have coordinates fixed to the point in the graph?

Do you want to request a feature or report a bug?

What is the current behavior?

Responsive Charts are do not resize when resizing windows if it's inside a CSS grid.

.home {
  border: 1px solid blue;
  display: grid;

  grid-template-areas:
    'hello'
    'links'
    'main';
 }

.charts {
  border: 1px solid green;
  grid-area: main;
}

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/ndLhnegs/).

What is the expected behavior?

It should resize when window is resizing.

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

https://github.com/rodoabad/automatic-palm-tree/tree/e557ebf246078c418da0678cba5b43c7abb41357

"recharts": "^1.1.0"

ResponsiveContainer computes the size of the chart based on the current window size. It also seems to respond when you make the browser window larger, however if you make the browser window smaller, the chart stays large. Tested on chrome.

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Some times i dont see label

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/qbmg1567/).

const _dataTypesMap = {
    "0": () => <Bar dataKey="clientQuestions" fill="#6aafff" minPointSize={1} />,
    "1": () => <Bar dataKey="arPercent" fill="#b8e986" minPointSize={1} label={{ fill: 'red', fontSize: 20, dataKey: "nps" }}/>,
    "2": () => <Bar dataKey="awsPercent" fill="#f16c97" minPointSize={1} />
};

const _getCharts = (dataTypes) => {
    return dataTypes.map(t => _dataTypesMap[t]())
};

const DashboardChart = ({ stats, dataTypes }) => {
  return (
      <BarChart width={1008} height={200} data={stats}
          margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
          <Tooltip content={<_Tooltip/>} payload={stats}/>
          { _getCharts(dataTypes) }
      </BarChart>
  )
};

What is the expected behavior?

I want see all times label

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

rechart - 1.0.0-alpha.1 OS Ubuntu 16.04 - 64x Browser Firefox 56.0b1 (64-бит)

Trying to get a label shown on a simple pie chart. No lines or anything are shown.

var COLORS = ['#3DCC91', '#FFB366', '#FF7373', '#FFCC00', '#3B22FF'];

        <PieChart width={300} height={200}>
          <Pie data={data} cx="50%" cy="50%" dataKey="value" label={true} labelLine={true}>
            {
              data.map((entry, index) => (
                <Cell key={index} fill={COLORS[index % COLORS.length]}  />
              ))
            }
          </Pie>
          <Tooltip />
          <Legend />
        </PieChart>

Why do none of the examples work on jsFiddle or on the main site? It just renders blank page.

UPDATE So, I dropped back to version 0.22.4 and it shows the label. The latest version doesn't show it.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Steps to reproduce

1. update package.json from "recharts": "^2.0.0-beta.8" to "recharts": "^2.0.0".
2. npm build

What is expected?

Build successfull

What is actually happening?

Creating an optimized production build... Failed to compile.

./node_modules/recharts/es6/index.js "export 'Props' (reexported as 'AreaProps') was not found in './cartesian/Area'

| Environment | Info | |---|---| | Recharts | v2.0.0 | | React | 16.14.0 | | System | Ubuntu 20.04 | | Browser | Chrome |

I had the issue both on Linux and Windows. Re-updating to "recharts": "^2.0.0-beta.8" worked on my windows instance (not on linux one)

On IOS 8.3 the AreaChart does not render if it is within a ResponsiveContainer. Used the example from the docs. http://jsfiddle.net/znqLLdev/1/

Removing ResponsiveContainer and adding width/height props to AreaChart renders successfully.

It occurs at the first time when I get data from server side. But when I get data from server side again, the line chart is right.

How can I make it right at the first time when I get data from server side.

Hello,

First of all thank you for this great library!

I was looking for the ability to change the color of a Line in a LineChart depending on the value of the current point (for example a price history chart becomes green when it's cheaper than initial price and red when it's more expensive than initial price)

Is it possible with the actual state of the library ? If not is someone already working on this ?

Server Error Error: require() of ES Module /home/l10006blr/Development/Nextjs/plants-shop/node_modules/d3-shape/src/index.js from /home/l10006blr/Development/Nextjs/plants-shop/node_modules/recharts/lib/shape/Symbols.js not supported. Instead change the require of index.js in /home/l10006blr/Development/Nextjs/plants-shop/node_modules/recharts/lib/shape/Symbols.js to a dynamic import() which is available in all CommonJS modules.

It would be great if it were possible to pass a function that evaluates to a data points value instead of passing a dataKey

i.e.

<Line dataKey="uv" />

could be equivalent to

<Line value={ (data, index) => data[index]["uv"] } />

That would allow Recharts to make less assumptions about the passed datas format and would enable more use cases like computing values

Description

Migrate existing tests for ChartUtils to Jest.

Refactoring:

• Remove calculateDomainOfTicks and use the logic in place.
• Improve typing
• Refactor calculateActiveTickIndex to early return with a guard clause.

Related Issue

https://github.com/recharts/recharts/issues/3137

Checklist:

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

Description

Migrated most of LineChart.spec to typescript / RTL

Related Issue

#3125

Motivation and Context

Migrate unit tests to jest/RTL/typescript

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

• [ ] 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:

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

We want to move all tests to jest, RTL, and typescript. Issues will be made to encourage small chunks of refactoring done at once.

Refactor test/specs/util/ChartUtilsSpec.js -> test-jest/util/ChartUtils.spec.ts.

https://github.com/recharts/recharts/blob/master/test/specs/util/ChartUtilsSpec.js

Acceptance criteria:

• All tests are in TS + RTL + Jest at ChartUtils.spec.ts
• ChartUtils.js is deleted
• All tests pass

As part of the jest migration we want to move all current jest tests to typescript. Issues will be made to encourage small chunks of refactoring done at once.

Refactor ComposedChart.spec.js ->ComposedChart.spec.tsx and any existing bar chart tests from karma

Acceptance criteria:

• All bar chart tests are in TS + RTL + Jest at ComposedChart.spec.tsx
• ComposedChart.spec.js is deleted
• All tests pass

As part of the jest migration we want to move all current jest tests to typescript. Issues will be made to encourage small chunks of refactoring done at once.

Refactor FunnelChart.spec.jsx ->FunnelChart.spec.tsx and any existing bar chart tests from karma

Acceptance criteria:

• All bar chart tests are in TS + RTL + Jest at FunnelChart.spec.tsx
• FunnelChart.spec.jsx is deleted
• All tests pass

As part of the jest migration we want to move all current jest tests to typescript. Issues will be made to encourage small chunks of refactoring done at once.

Refactor AreaChart.spec.jsx -> AreaChart.spec.tsx and any existing bar chart tests from karma

Acceptance criteria:

• All bar chart tests are in TS + RTL + Jest at AreaChart.spec.tsx
• AreaChart.spec.jsx is deleted
• All tests pass