Help needed - XY scatter chart with line & area series about visx HOT 6 OPEN

hey @nouman91 thanks for checking out visx. in SVG, rendering order is based on the document order, and since the document order depends on the order you render them in react, you can think of it as "first xychart child gets rendered at the bottom of the visual stack, and the last is rendered at the top". (this is true for axis/series/annotations, the main exception is probably tooltip which is always bubbled to the top)

so to get what you want, you should do something like the following (currently your AreaSeries is last, so it would be rendered on top)

<XYChart {...}>
  <AreaSeries />
  <LineSeries />
  <GlyphSeries />
</XYChart>

from visx.

@williaster Thank you for replying so quickly. Yeah, I had tried switching its place but it did not working. This is the result if I use the above arrangement.

I also tried other position but its always stays there

from visx.

This is how it looks if I remove the line series. I think there is something essential I am missing & can't quite figure it out the what.

from visx.

to me it looks like your x-accessor is returning different data since the series are not aligned (hard to tell without a code snippet, but the x-accessor is different in your original code snippet). also to make the bottom of the area not map to zero you need to specify bot y0Accessor (lower) and yAccessor.

from visx.

I managed to put together a dirty code sandbox please check when you get a chance
https://codesandbox.io/p/sandbox/xy-scatter-chart-zprp3r

from visx.