Help needed - XY scatter chart with line & area series

[nouman91]

Hi Visx folks,

I am working with XY scatter chart and my use case is to have area series & line series in the same chart. I want to have area series as a background to Line Series. I have attached two images one is final result and one is my current progress. I am not able to figure out how to get area behind the lines. For reference area is the blue color wavy part on the chart.

Final Chart:

Current chart:

Sample code that I am working with

` <XYChart
xScale={{ type: 'band', nice: true }}
yScale={{ type: 'linear', nice: true }}
width={props.width}
height={500}
>

  <AnimatedLineSeries
    dataKey="time_series"
    data={timeSeries}
    curve={curveLinear}
    xAccessor={dateAccessor}
    yAccessor={dataAccessor}
    stroke="green"
    strokeDasharray="1"
  />
  <AnimatedLineSeries
    dataKey="prediction"
    data={predictions}
    curve={curveLinear}
    xAccessor={dateAccessor}
    yAccessor={dataAccessor}
    stroke="#222"
    strokeDasharray="1"
  />
     {/* <AnimatedAreaSeries
    dataKey="area"
    data={data.confidence_interval}
    xAccessor={upperAccessor}
    yAccessor={lowerAccessor}
    curve={curveLinear}
    height={10}
    accentHeight={50}
  />
</XYChart>`

Any idea or suggestion on how can I achieve the above result?
Thanks for your awesome work!

[williaster]

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>

[nouman91]

@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

[nouman91]

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.

[williaster]

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.

[nouman91]

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

[hshoff]

Moving this issue to a discussion