-
Notifications
You must be signed in to change notification settings - Fork 690
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Help needed - XY scatter chart with line & area series #1813
Comments
hey @nouman91 thanks for checking out so to get what you want, you should do something like the following (currently your <XYChart {...}>
<AreaSeries />
<LineSeries />
<GlyphSeries />
</XYChart> |
@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 |
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 |
I managed to put together a dirty code sandbox please check when you get a chance |
Moving this issue to a discussion |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
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}
>
Any idea or suggestion on how can I achieve the above result?
Thanks for your awesome work!
The text was updated successfully, but these errors were encountered: