echarts
echarts copied to clipboard
[Bug] Candlestick chart doesn't mix with xAxis type 'time'
Version
5.4.2
Link to Minimal Reproduction
https://echarts.apache.org/examples/en/editor.html?version=5.4.2&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5JALZW0A0J6eAxgIYA2NZAE4BXKm3QBfcbHI58RVKVhc-AsCLEkpJMMGC9IIBeyEQA5maqC63XHlYnb-AArAI0MFeNL0FanU5BYDx7E21JaTwrCCpCWABtE0UfPwFaHmgAE348SE4AawcfWEzuMG4iROL0eIBGADZagA4m2oBWeoAGbu6WWHaAFgBOeoA6JvqhvsH6gCZRxum2ga7Rgdalts7a8YGAXWliusaW2qHZnt7-5fqAdlGAZiWBtqbRztnngYfR2ufboajWazA4mJTHZpNYFNS6dL5vB4DZ6zMbnZ61eZtZ71VGg6oJBqQlEDWHItqjW63MlrP7XAYY0ZYunLR70vHVCEtB6wq6DNrzTpNZ4PQEPWq0wZnCmdKbMwEA9lHQlch5dS5fMYy2WDB5vAbDYXzWpI5kDIH1RU-TlNB63C7qukPH4DT50lFApra5azcltL36t63T2W8HKpokmEOwb095e3U_EYStq2zoU26dJnRn4-kOka36klR5adH5zJa6wEo8v1N7G56CxlnXM1MMre09cue95J1UIuM1x5xoap43NgknYftjvXVU7drll5AoY9_U08tDH4YoZjznDjqkmdBxkm9pi8k18u1VO3E_JgGMi2HK3K4fnA-n22PJ7XWaroU_z9ZipGdPzuHcXwxSNp3aFFAS9FE53qJZZgeeZzng24dhzJ9QwnBpC2g_l0zWeDf1GIZ_xg2pS0zIisLacCJynQjZgaR5Fh_YFyIBWjWMxZCHnJIZMMY5pzlVd9-TYtok2BHZk2QhleOGRlRM9IDmOQl13lddpqNFJDrivQFllk9YgW2NSN0FSSznuIMlgxX0vWM48kzsikmis1C1UIjExl0mTZhM9z3UC6jUw-KyWgI3kZPvZdHJtClvz0p1zWQ7pxhFKy31stp7htRz6nJBpHK2Clb3tbLtxwvMXyGfciwaQNxUc1Dxm2dq5zaoyb0ZGTcryvz6jNICMySs0XRc8VssmhYxVE4cPiguLIN-W9jU3elHNmWtNvDBbaiW7pRvyo1aMFStLtuMZ3L9c0TqvHldrNdoXNuBNKK2TDPMc27dieiSiyunTHI3SqlkFAKhngq8FlqsF6saYdajtWzYaBMVwbGSkkvmPbFNTDpEfxCFUeW5rGpS8GhOAvSIY3cHAReE6b1WuEf35d4qtVcY_QE1NAr2wFwzZ8NJPG7jGuQuZfk9QWgWQloFhOqEXq5t5BWQ5dGWC5COjmn8IZQtWmpYykH1ln5EQNn5MPg6mGLqlsUauzSfxxI2YM-8j4OTCkzmVs0a1JjlCVfPbJaPO5ZcBIPPZ2enkw-SqTpGWLOZgiZfl4qEvwNt641Tm8luejXs9TRoewZcbeJktZUuTFCUuOl3xzOK9gZY4SPRr3GE5gp3vtQhEHjLjNM8vclgXLC49cvG2m9Q68vPb8nCQ9mC7gpQyh_JfVZaT29uUBGUy9GjnlfuOsf1uUr652FZZIojaL4losfXPb7YKxgSQuDgsQa68I5o2YlnfkD08ae1rNjLmNFlbzEpGXe-vk4pS1eAJckDkALOVkvnZBICUZo2GuggqaxWLlQTFQxkiVPZCzbkjV2ncoRXz6vcEUilNzfWNKKH-1E1g8TLhMKeRlDZDANFzeSPCVLJx9ICHEZdKaf11BQ5C98BJTR_glR8TCO7LmXGwn2ZpoE-wUcLX2o11HmKWi6Tooih73CZjOeG-p8FPz3s3ckwYiFnBdJnCBwUFEynUaVeC9Qfgljnt4sOSoUYulupLCR4wf6GysfA94njgpmhaLYsUW9-RdnelpKuCsAL3A-DrSK-xfESMREYyBYwBiYXUW8Ks5SwY_hhL8cetTvgfxYqNNcXTMQyQNjfR2Yw7ixOfPEuxksuyUONpqThd89QtJnA2CYtiXhoMCck8MOstYWMrJeAUII-nDAKdyKZI8soAkdlhOMSkZm4T8TJCuKdUxwKHmMW2xsQ4n22IyXpSNLThFgHsFAEgADcQA
Steps to Reproduce
No further action required, just look at what gets drawn.
- Perhaps it's required to make the browser window a bit more narrow to make the drawing space small enough, my browser window is ~1000 pixels wide.
- Key of the given code is a data series of type 'candlestick' in combination with a xAxis type 'time'.
- Sample data is actually real world data, hourly candles of the German DAX index in April 2021.
- Reason to use xAxis type 'time' is the brilliant way this type zooms date/time values. AFAIK, repeating this with an xAxis type 'category' would require a whole lot of code, if possible at all.
Current Behavior
- [ ] Candlesticks overlap each other.
- [ ] Huge gaps between groups of candlesticks.
Expected Behavior
- Candlesticks never overlap.
- Candlesticks evenly distributed, even if there are gaps in their appearance in time. Just like ECharts' candlestick demos look like.
Environment
- OS: Debian 12
- Browser: Firefox 102 ESR
- Framework: (no framework)
Any additional comments?
Yes, I'm aware that none of the candlestick demos uses this type of xAxis. And they're all not exactly great at zooming horizontally.