Support React 19

[justinh00k]

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

Bug

What is the current behavior?

Charts do not render when using React 19, or when using NextJS 14.3 (which uses React 19).

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar (template: https://codesandbox.io/p/sandbox/simple-line-chart-v25dl4).

Install react@rc or react@beta
Observe charts do not render
https://github.com/justinh00k/recharts-react19-repro

What is the expected behavior?

Charts render

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

2.12.7 / No

[ckifer]

React 19 will be added to peerDependencies when recharts supports it.

Please see #4542 and #3615

Edit: Current alpha https://www.npmjs.com/package/recharts/v/2.13.0-alpha.4

[ckifer]

Going to edit the title if you don't mind to just "Support React 19", and use this to track support in 2.x

[ckifer]

Alpha release - https://www.npmjs.com/package/recharts/v/2.13.0-alpha.0
This BREAKS things in R19, shouldn't in R18

use this to determine what is breaking/what isn't. I just don't have bandwidth to fix it myself

Things that I know are broken:

Bar
Legend
Cursor
Pie

[ckifer]

https://www.npmjs.com/package/recharts/v/2.13.0-alpha.2
Should have more R19 support if not all of it (minus the need to disregard peerDeps and install react-is@19)

Please test this one as well on all React versions 16.8-19 to see if anyone runs into issues. Thanks! 🚀

[ckifer]

In order to use React 19 one must override the react-is version. This will always be true in 2.x. 3.x we will add react-is to peerDeps or remove it entirely

  "overrides": {
    "react-is": "^19.0.0-beta-26f2496093-20240514"
  }

[rauchg]

appreciate your work @ckifer

[ckifer]

Appreciate @eps1lon and next helping out a bit here @rauchg!

[juliusmarminge]

Just tried on Next.js RC (React 19.0.0-rc-f994737d14-20240522) and my beautiful charts are back. Thank you 🙏

EDIT: Or maybe not? Some breaking types? Adding an @ts-expect-error for now I guess

[rauchg]

My only issue remaining is <Legend /> started rendering incorrectly, but it might be skill issue. I'm using Tremor, so maybe it's related to their impl and the version bump.

[ckifer]

@juliusmarminge Not sure why the types broke, are there React 19 types released? I can't seem to reproduce. But might need to add explicit children

Also noticed that @rauchg - I think probably another defaultProps issue that hasn't been caught yet. Will take another look

Edit: for Legend for now you can just add the defaultProps back yourself (not sure if you can do this in Tremor)

        <Legend iconSize={14} layout="horizontal" align="center" verticalAlign="bottom" />

[ckifer]

Legend:

• This still uses defaultProps incorrectly (doesn't include them)
• This also causes issues (props not combined)

[emanuele-moricci]

I've also noticed a particular difference only when updating from recharts@latest to recharts@alpha-2 + react@rc:

I have an AreaChart (without set height/width) wrapped with ResponsiveContainer:

<ResponsiveContainer width="98%" height="98%">
            <AreaChart data={data} margin={{ right: 0, left: 0 }}>
...

After updating though, the same exact code does not render the graph in any way

I have tried with both set/dynamic dimensions on the AreaChart component, ResponsiveContainer or the other wrapping html tags (following the examples on the docs website) but the chart either doesn't render at all or loses all the responsive features it had before.

Is this also true on your end?
If there's anything I can do (or share of my config) to help, I'm at your disposal.

[ckifer]

@emanuele-moricci this sounds like your version of react-is hasn't been overridden #4558 (comment)

Try to npm ls react-is and see if it gives you multiple versions.

[emanuele-moricci]

And you'd be right! For future reference:
I updated every occurrence of react-is by hand in my package-lock (I use PNPM) since the overrides features was not getting nested packages even when explicitly written.

After that, I cancelled the node_modules folder and fired pnpm install, and it worked! Thank you for the assistance 🙏🏽

[eps1lon]

You definitely need to force react-is@rc either via resolutions (Yarn) or overrides (PNPM, NPM).

react-is will be a peer dependency in 3.x to fix these issues (see #4541). But it's a breaking change so it can't land in 2.x.

[ckifer]

https://www.npmjs.com/package/recharts/v/2.13.0-alpha.3

Alpha-3 should fix the Legend issues mentioned above. Please continue to report other issues as you run into them, thanks!

[tobiaslins]

It seems like there is an issue with stacked bars. The same stackId does not stack but are overlapping

"next": "15.0.0-rc.0",
"react": "19.0.0-rc-6f23540c7d-20240528",
"react-dom": "19.0.0-rc-6f23540c7d-20240528",
"react-is": "19.0.0-rc-6f23540c7d-20240528",
"recharts": "2.13.0-alpha.3"

   <Bar dataKey="pv" stackId="testing" fill="#8884d8" />
   <Bar dataKey="uv" stackId="testing" fill="#82ca9d" />

const data = [
  {
    name: "Page A",
    uv: 3000,
    pv: 2401,
  },
  {
    name: "Page B",
    uv: 100,
    pv: 1398,
  }]

[ckifer]

Thanks @tobiaslins will look into it

[ckifer]

@tobiaslins I can reproduce here https://codesandbox.io/p/sandbox/stacked-bar-chart-7fwfgj
But I can't reproduce in the recharts repo and I'm not sure why. Makes debugging these issues difficult - if anyone wants to help feel free

[ckifer]

recharts/src/util/ChartUtils.ts

Line 1064 in fad4d30

const axisId: AxisId = item.props[numericAxisId];

This is why stacks fail - we expect an axisId to be present but it isn't getting defaulted because of the way defaulProps are read. This one doesn't seem as reasonable to refactor as the other ones so for now specifying axisIds on you graphical items and axes should fix it. Will work on a fix in the meantime

[ckifer]

New alpha version released https://www.npmjs.com/package/recharts/v/2.13.0-alpha.5
Type issue should be fixed, but please let me know if it isn't

[ChrisRoland]

Can I use recharts bar chart component in my NextJS.14 app?

[ckifer]

Yes

[arno-fukuda]

For folks using bun and still running into issues:

• Make sure you are on bun >=1.0.6 for overrides to work.

[GetPsyched]

Seems like it's fixed for the others yet I'm still having this issue. Relevant versions from my package.json:

  "dependencies": {
    "next": "15.0.1",
    "react": "19.0.0-rc-69d4b800-20241021",
    "react-dom": "19.0.0-rc-69d4b800-20241021",
    "recharts": "^2.13.0",
  },
  "devDependencies": {
    "@types/react": "npm:[email protected]",
    "@types/react-dom": "npm:[email protected]",
  },
  "overrides": {
    "@types/react": "npm:[email protected]",
    "@types/react-dom": "npm:[email protected]"
  }

[ckifer]

@GetPsyched Your overrides are not correct. Override your "react-is" version to match your react version.

[GetPsyched]

Thanks for the extremely quick response! And it worked like a charm! Thanks.