[Bug] Candlestick chart doesn't mix with xAxis type 'time'

Traumflug commented 1 year ago

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.

helgasoft commented 1 year ago

repeating this with an xAxis type 'category' would require a whole lot of code, if possible at all. Candlesticks evenly distributed, even if there are gaps in their appearance in time. Just like ECharts' candlestick demos look like.

You requirements will be satisfied only through xAxis type 'category'. It is possible, as in the example. Just adapt splitData() to your data.

Traumflug commented 1 year ago

You requirements will be satisfied only through xAxis type 'category'.

I mean I wrote into the bug report that I'm aware of these demos :-)

These demos distribute candlesticks evenly, but are lousy at displaying date and time labels on that axis. xAxis type 'time' does this an order of magnitude better: displaying year or month or day or clock time depending on zoom level and distributing shown labels not evenly, but marking important ones, like first day of a month or first candle of a day, also depending on zoom level.

helgasoft commented 1 year ago

If your complaint is about axis labels of type 'category', then take a look at String Templates. Discussed in #18252.

Traumflug commented 1 year ago

It's about xAxis type 'time'. And I don't complain about anything. My app is running better than the demos already, I ended up writing a couple of formatters. An xAxis type 'time' could do it even better, right now that's not an option.

I just try to be a kind Open Source user and report bugs when I run across them. If you consider overlapping candlesticks to be expected/wanted behavior, please say so, then I can close this issue. If you don't like bugs being reported, please say so as well, it saves me a lot of time.

IM-001 commented 3 months ago

Any update on this? This seems like a very important feature to me. Everything that said OP is on point and accurate. I also have a very complex formatter to use the date formatting with the datazoom, but it is far to be working greatly and an extremely long formatter so far.

Let's make the time axis available to candlestick charts please. Thanks!

JakkuSakura commented 2 months ago

Encountered this issue as well.

We should be able to supply a start time and end time, or just specify the middle time(seems currently only middle time is supported)

It also seems have issues with tooltip data, not sure if it's issue of my own code bad

good

I'll take some time fixing it though. I think it's easier to fix the code than add a custom formatter

ivanzrx commented 1 week ago

Yeah, this is very important. Because if we use category, it is hard to label xAxis dynamically.

helgasoft commented 1 week ago

@ivanzrx , candlestick series work with time axis - Demo

apache / echarts