Stacked area charts very different with the same data & code between recharts 1 & 2

[wmhartl]

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

Reproduction link

Steps to reproduce

Using sandbox above, just change the recharts version from the working 1.8.5 to 2.0.9 and you'll see the issue.

What is expected?

Them to look the same (or very close to the same).

What is actually happening?

The new version of Recharts is spitting out some pretty ugly stacked area graphs. Seems like connectNulls and possibly type="basis" are not working correctly.

Environment	Info
Recharts	v2.0.9
React	17
System	Windows 10
Browser	Chrome 89

[wmhartl]

Seeing a similar difference with Line as well with the same data set.

[wmhartl]

@xile611 I believe I've found the source of the problem in Area

line 204 in Area.tsx
const isBreakPoint = _.isNil(value[1]) || (hasStack && _.isNil(originalValue));
if you remove the latter half after the OR, e.g.:
const isBreakPoint = _.isNil(value[1]);
the area chart renders correctly. I'm not sure what impact that will have on other charts given my unfamiliarity with the codebase so I'm posting here in hopes this helps speed along the fix.

[wmhartl]

I'm less concerned about the similar issue with Line at this point, but in case its helpful for Area or in general, a quick look shows changing line 148 of Line.tsx from:
y: _.isNil(value) ? null : yAxis.scale(value),
to:
y: _.isNil(value) ? yAxis.scale(0) : yAxis.scale(value),
at least has the lines draw correctly, although the points on the chart are not correct. I do not see a way here to look for the connectNulls prop so it may not be the best place to fix it.

[wmhartl]

Sad workaround for anyone that finds this is to iterate across your data and fill in all the null values with 0 values yourself.

[Ptolemae]

I am also having this issue I believe. Sadly stopping me from migrating to 2.1.6 at the moment. Using type "linear"
Recharts 1.8.5

Recharts 2.1.6