Is it possible to create an area with multiple y0?

[andreyukD]

Question

As in the picture, I have two areas. The question is about an area where the bottom is not a number, but an array of numbers. Is it possible to implement this now in a new version?

I'm using useAreaPath which accepts y0 as a number

[zibs]

I don't think you can set the y0 to an array of numbers.

But you could use multiple Area charts in a single chart if you have another yKey to use, like z in this example:

   <CartesianChart data={DATA} xKey="x" yKeys={["y", "z"]}>
      {({ points, chartBounds }) => (
        //👇 pass a PointsArray to the Line component, y0, as well as options.
        <Area
          points={points.y}
          y0={chartBounds.bottom}
          color="red"
          animate={{ type: "timing", duration: 300 }}
        />
     <Area
          points={points.z}
          y0={chartBounds.bottom}
          color="blue"
          animate={{ type: "timing", duration: 300 }}
        />
      )}
    </CartesianChart>

[andreyukD]

Thanks, I know that a new version allows for creating multiple areas, but I still can't make an area of "difference" (dark red area on the left image). It was achievable in an older version though. Do you have any plans to add this functionality?

[weuniok]

So, is there currently no way to make an area between 2 data sets like in the non-native victory unless one of them has constant y?

https://commerce.nearform.com/open-source/victory/docs/victory-area#data