x-axis line below zero when area type is "natural"

[VictorSouza02]

I need help with this topic, look at the images:

Area type="natural"

Area type="linear"

chartData:
const chartData = [
{ date: "2024-11-01", spent: 0.0, received: 850.0 },
{ date: "2024-11-02", spent: 150.45, received: 0.0 },
{ date: "2024-11-03", spent: 200.23, received: 0.0 },
{ date: "2024-11-04", spent: 75.12, received: 0.0 },
{ date: "2024-11-05", spent: 120.67, received: 0.0 },
{ date: "2024-11-06", spent: 80.9, received: 0.0 },
{ date: "2024-11-07", spent: 110.34, received: 0.0 },
{ date: "2024-11-08", spent: 95.23, received: 0.0 },
{ date: "2024-11-09", spent: 130.45, received: 395 },
{ date: "2024-11-10", spent: 200.12, received: 0.0 },
{ date: "2024-11-11", spent: 90.78, received: 0.0 },
{ date: "2024-11-12", spent: 115.34, received: 0.0 },
{ date: "2024-11-13", spent: 250.67, received: 0.0 },
{ date: "2024-11-14", spent: 60.45, received: 0.0 },
{ date: "2024-11-15", spent: 135.23, received: 0.0 },
{ date: "2024-11-16", spent: 105.78, received: 0.0 },
{ date: "2024-11-17", spent: 80.56, received: 0.0 },
{ date: "2024-11-18", spent: 110.23, received: 0.0 },
{ date: "2024-11-19", spent: 130.67, received: 0.0 },
{ date: "2024-11-20", spent: 75.9, received: 0.0 },
{ date: "2024-11-21", spent: 200.34, received: 0.0 },
{ date: "2024-11-22", spent: 120.45, received: 0.0 },
{ date: "2024-11-23", spent: 95.78, received: 0.0 },
];

[Poolshark]

Hey!

Assuming you want round curves and a cap on the horizontal axis, you will have to set the area type property to bump.

I guess sth like this should do:

<Area
  dataKey="spent"
  type="bump"
  fill="url(#fillSpent)"
  stroke="var(--color-spent)"
  stackId="a"
/>
<Area
  dataKey="received"
  type="bump"
  fill="url(#fillReceived)"
  stroke="var(--color-received)"
  stackId="b"
/>