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.

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)

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.

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/