UPDATE:
I tested around, and I updated the codesandbox and the problem occurs in the newest version v2.1.16.
The issues I got in dev vs prd env was just some vite cache not cleared properly, which did not help in finding the error.
If you go into the sandbox and switch the recharts version number (left hand side) you can see, that with v2.1.15 (and smaller) everything works as intended but with v2.1.16 it breaks.
Now I am uncertain if there is a new API behavior, or it is just a bug.
I found something, that might have something to do with it
#3013
So according to my observations it has something to do with the latest version v2.1.16.
I needed to make some modifications to where baseValue should be placed
// Shortened to simplify
<AreaChart
data={chart}
// Works in recharts v 2.1.8, 2.1.10, 2.1.15
// Does NOT work in recharts v 2.1.16
// baseValue={first} // <- This seems to be the problem in 2.1.16
>
<defs>
<linearGradient id="splitColor" x1="0" y1="0" x2="0" y2="1">...</linearGradient>
</defs>
<Area
type="monotone"
dataKey="price_close"
stroke="url(#splitColor)"
fill="url(#splitColor)"
baseValue={first} // <- Since v2.1.16 the baseValue must be added to <Area> instead of <AreaChart>
/>
</AreaChart>
With this modification, everything seems to work fine as in version before v2.1.16
Reproduction link

Steps to reproduce
I have a problem with the area chart that only occurs when I trigger production build.
In dev mode everything is wonderful, as you can see in the codesandbox.
I played around a bit and my observation is, that the baseValue variable is not read in production but I have no clue why. Everything is the same.
So, in short, if I build my code via
yarn run start everything is fine (as in the codesandbox)
but as soon as I run
yarn build
yarn preview --host
I got the problems
What is expected?
The chart should be identical in dev mode as in production build and the baseValue should be read correctly
What is actually happening?
The charts are not identical. My observation is, that baseValue is not read correctly.
| Environment |
Info |
| Recharts |
v2.1.16 |
| React |
18.2.0 |
| System |
Windows 11 |
| Browser |
Edge Version 107.0.1418.35 |
| Browser |
Firefox Version 106.0.5 (64-bit) |
| Browser |
Chrome Version 107.0.5304.88 (64-bit) |
I have tested multiple browsers, but its the exact result in each of them
I added screenshots from my environment.
One can trigger the wrong chart display in the codesandbox if you omit the baseValue like
// Correct display
<AreaChart width={400} height={400} data={chart} baseValue={first}>
// Exact display as if I build my code in PRD mode
// obviously in my code the baseValue is NOT commented. Just for demostration purposes here
<AreaChart
width={400}
height={400}
data={chart}
// baseValue={first}
>
PRD

DEV

UPDATE:
I tested around, and I updated the codesandbox and the problem occurs in the newest version v2.1.16.
The issues I got in dev vs prd env was just some vite cache not cleared properly, which did not help in finding the error.
If you go into the sandbox and switch the recharts version number (left hand side) you can see, that with v2.1.15 (and smaller) everything works as intended but with v2.1.16 it breaks.
Now I am uncertain if there is a new API behavior, or it is just a bug.
I found something, that might have something to do with it
#3013
So according to my observations it has something to do with the latest version v2.1.16.
I needed to make some modifications to where
baseValueshould be placedWith this modification, everything seems to work fine as in version before v2.1.16
Reproduction link
Steps to reproduce
I have a problem with the area chart that only occurs when I trigger production build.
In dev mode everything is wonderful, as you can see in the codesandbox.
I played around a bit and my observation is, that the
baseValuevariable is not read in production but I have no clue why. Everything is the same.So, in short, if I build my code via
yarn run starteverything is fine (as in the codesandbox)but as soon as I run
I got the problems
What is expected?
The chart should be identical in dev mode as in production build and the
baseValueshould be read correctlyWhat is actually happening?
The charts are not identical. My observation is, that
baseValueis not read correctly.I have tested multiple browsers, but its the exact result in each of them
I added screenshots from my environment.
One can trigger the wrong chart display in the codesandbox if you omit the
baseValuelikePRD

DEV
