How to create this graph?

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

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

1 Like

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🙏

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

Thank you so much!!:scream:

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:

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

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