How to create this graph?

Community Help
1

Hello! Can anyone please suggest how to create this graph?

image
image1580Ɨ1090 44.9 KB

2

Hello, youā€™ll probably want to use Observable Plotā€™s area mark; see Area mark | Observable Plot.

1 Like
3

Thank you. But the thing I donā€™t understand is how to make Y axis on 0 to be statically in the middle. If, for example, the maximum value is 100 and the minimum value is -1, 0 on the Y axis will go down to display the majority which is the positive area. And the second thing is how to make a gap in the middle of the graph (0 on the Y axis) between positive and negative areas.

I would be grateful for any advicešŸ™

4

Not exactly right, but something like this. The y-axis gap at 0 is not technically correct, but this gives a visually similar idea, and also, I donā€™t know how to make those rounded corners :slight_smile:

1 Like
5

Thank you so much!!:scream:

1 Like
6

Hello. I forked your solution and added gradient, date ticks and rounding. But thereā€™s still one little thing left to do and after researching for hours, I still havenā€™t found any clue. Do you have any ideas?:pray:

7

Nicely done on those gradients!
For the rounded corners around the x-axis, perhaps you can just draw some white-filled arcs on top of the chart (kinda like what you are doing with the Plot.ruleY on top of the chart?

1 Like
8

Thatā€™s a good idea! But how do I find out the position of those corners?