Check : https://echarts.apache.org/examples/en/editor.html?c=area-st...

Yep +1 - just swap xAxis and yAxis and you get really close, and echarts has lots of customization. I just don't think you'll get images for a background with it.

Will look into this, thanks.

Offhand do you know if that offers:

- 100% stacked area (also known as percentage stacked area)

- inverted axis (so it's vertical, not horizontal)

Looks like it's all possible that you mentioned:

1) Create a 100% stacked area chart https://www.anychart.com/blog/2020/06/10/stacked-area-chart-...

OR

https://docs.anychart.com/Basic_Charts/Area_Chart + https://docs.anychart.com/Basic_Charts/Stacked/Percent/Area_...

2) Change chart = anychart.area(); to chart = anychart.verticalArea();

3) Tune it up digging into the documentation, for example: https://docs.anychart.com/Common_Settings/ https://docs.anychart.com/Appearance_Settings/ https://docs.anychart.com/Graphics/ etc.

4) Ask Support if not sure re anything (usually pretty fast and helpful): https://www.anychart.com/support/

I've seen the other responses already contain ready solutions, however in general, if you're in need of custom/non-standard graphs, then D3.js is a great library for constructing them, providing many common building blocks and a declarative API.

Do note that D3.js is a lower level library, so you will end up writing a lot of code to build a chart.

D3 could be the right tool for this. When I first used D3 years ago, it seemed so incredibly overkill. But maybe it's just right for something like this project, with these specific requirements.

Why wouldn't D3 work here?

When I first used D3 years ago, it seemed so incredibly overkill. But maybe it's just right for something like this project, with these specific requirements.