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

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

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 LineChart.spec.js -> LineChart.spec.tsx and any existing bar chart tests from karma

Acceptance criteria:

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

Description

D3 moved to vending ESM only. Our consumers use jest, next, etc. which requires cjs - if we patch d3 security vulnerability in a patch fix we break our consumers. In order for v2.x.x to be secure we need a cjs version of patched d3.

victory-vendor does this for us as per blog post https://formidable.com/blog/2022/victory-esm/

change d3 references to victory-vendor, remove direct d3 dependencies

Related Issue

#3012 #3009, more

Motivation and Context

Fix dependency vulnerability that will not go away in 2.x.x due to d3 not wanting to upgrade

How Has This Been Tested?

See comment here https://github.com/recharts/recharts/issues/3012#issuecomment-1366152741

Created two duplicate branches. One I upgraded the dependencies directly, this one I replaced with victory-vendor. Due to adding jest tests to our test suite we now have a failing build when directly upgrading the deps.

Many references are also in our demo project - these continue to work as well. Tested manually. npm run test npm run build npm run demo

Screenshots (if appropriate): N/A

Types of changes

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

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

Compatible with current API, if no value is given for parent nodes. If a value is given for a parent node, the current API would ignore that value, while the API in this patch would adopt it.

Work In Progress - I still need to figure out how to only show the parent names. As it is, the parent and all child names are superimposed into an unreadable mess. I plan to get to that over the holiday break, but I'm publishing now in hopes of avoiding wasted work in case this whole approach is wrong.

Related Issue

#3114

Motivation and Context

When calculating the size of a parent node, the current code adds up the values of all children. I sometimes want to do something different, for example to size the parents according to the max/min/mean or other aggregate of the children's values.

How Has This Been Tested?

I've created a demo with pre-calculated parent values. I generated that demo with random data many times and observed it to show sizes that match up with parent values as different from the normal Treemap demo that shows parent sizes according to the sum of all child sizes.

Note that this level of detail is not explained in the docs, so I made no changes there.

Screenshots (if appropriate):

Types of changes

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

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.