[Bug] Unexpected behavior when using stacked lines in chart with x-axis of type 'value'

[vincesp]

Version

5.4.3

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=MYewdgzgLgBAJgQygmBeGYCmB3GAxAGxCQGYAmAQQCcqEBPACgG0AoGGARgBoYSeyAdAA4eABgF8YZfgICsM6THHzeMgOwyAbCvEcWAXQCUAbhahIsOAEsAtpkhXwENDCYByAB5uebgG7eYNwIAtwBXN31TFhAAByhHMBcAbzYYKBAQAniYgC4YFPZ2KCorAHNSzCo8tysoTBtvVPYEDysIAAUQKzA6qvymwqg6GMxq4CoQCAhGwsKEMFskBLyAMwQCCEwBgF9U7a5UjwpWiDyCweHRwN910MwZwohgdaviu72D9jpjtrOBoZG1RuBDubg-qU2JUwp1cA3OswBVyC3Xun1mMHsoDgVySMA81S8PDo1WCMH2A3YiGQaNm1jsDicNMKBBRAGUhgQcRTCrEEMBasTONzyeiYNA-QBrMbgFZWbFgYCYAC0ACN5nAHrMIHQbCrMtUwOB7jsmfCLoDAiysJrCpiQNizniCQFBWE3GSmZSkAhPfBbPYIAkIL6rZh2XROX9Rexefyhnk9KKRejxcApYFzLL5YrVerGtyEFRMAhw5H-tGYKAiH03ABiYANsFJk1w7mIkkom3sO0O_JOwKEmCu_we7lUn1j_0MyA7VL6FjbYxAA

Steps to Reproduce

• Create a line chart with stacked lines
• Set both axes to type: 'value'
• Fill the area between two lines of the stack

Current Behavior

The stacked line gets stacked on the values of the x-axis.

Expected Behavior

The stacked line gets stacked on the values of the y-axis, the same behavior as if the x-axis was of type 'category'.

Environment

- OS: Windows 10 Enterprise
- Browser: Chrome 120.0.6099.71
- Framework: None

Any additional comments?

Or are there other options for filling arbitrary areas between two lines, or between one line and one particular axis?

[vincesp]

Swapping the x and y axis also does not fix this odd behavior. Still, the wrong axis is used for stacking:
https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=MYewdgzgLgBAJgQygmBeGYCmB3GAxAGxCQGYAmAQQCcqEBPACgG0AoGGARgBoYSeyAdAA4eABgF8YZfgICsM6THHzeMgOwyAbCvEcWAXQCUAbhahIsOAEsAtpkhXwENDCYByAB5uebgG7eYNwIAtwBXN31TFhAAByhHMBcAbzYYKBAQAniYgC4YFPZ2KCorAHNSzCo8tysoTBtvVPYEDysIAAUQKzA6qvymwqg6GMxq4CoQCAhGwsKEMFskBLyAMwQCCEwBgF9U7a5UjwpWiDyCweHRwN910MwZwohgdaviu72D9jpjtrOBoZG1RuBDubg-qU2JUwp1cA3OswBVyC3Xun1mMHsoDgVySMDo1S8PA81WCMH2A3YiGQaNm1jsDicNMKBBRAGUhgQcRTCrEEMBavjONzyeiYNA-QBrMbgFZWbFgYCYAC0ACN5nAHrMIHQbCrMtUwOB7jsmfCLoDAiysJrCpiQNizniCQFiYFwmSmZSkAhPfBbPYIAkIL6rZh2XROX9Rexefyhnk9KKRejxcApYFzLL5YrVerGtyEFRMAhw5H-tGYKAiH03ABiYANsFJk1w7mIkkom3sO0O_JOwKEmCuvxuD3cqk-8f-hmQHapfQsbbGIA

[helgasoft]

xAxis: { type: 'category', for first, and yAxis: { type: 'category' for second example
📌 please close issue if problem solved.

[vincesp]

xAxis: { type: 'category', for first, and yAxis: { type: 'category' for second example 📌 please close issue if problem solved.

All my dimensions contain float values, so I need to use type: 'value' for both axes. How can I get the stacking right in that case? This is the typical use case of drawing a confidence band.

[helgasoft]

maybe #18437 can help

[vincesp]

I was now able to achieve what I wanted by creating a custom renderer.

Yet, I ask myself:

• Why can echarts not support such a behavior out of the box?
• What is the underlying requirement description that led to the implementation which results in the behavior depicted under "Current Behavior" above? Which use case does that solve?