apache / apache/echarts

[Bug] Candlestick graph candles (solid/hollow)

Open
#20,322 2 comments 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.2.2

### Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=candlestick-brush&code=MYewdgzgLgBArgBwMIgDYgE4wLwwOQDEADEQCYCGAzMHgNwBQokspIA7mCulroQKbASJOvQBmcMMCgBLcDAgJU0qABFyUcgAoM5Nmo0BKGAG96MGKj6xg6vgHNMAT33kcMANoBdBucuwAbuSocHwQbl4-FlYw_mhwALah4d5mMKKYMJp-MNJuRLQ5MAA8MDp66uQAdJZgdlAAFgXSANTNRqbm5jZQ9k4ulQhwEPXaui7u0p6VCkrAfJpEADQwAIwG7kSeBpHmgcGhA0MjZeOT26m7cYkQh8OaE8snFROe7gAsno9jz5MbnjAAPlK3w0L3cK3-AH5VjAAFwwAC0EPO5gAvqkMFY4BgwCYLjBur0MM4KvDCQ5iS5Fvi9iEIPDaaFqZ0YldQgy2RBUqiGOjxJIZHIbKhgHBULYALIAQU0FEcKAkUGWFEMeN25CwmIgYtguAiqXSWE0gSwuVwSyiuNwKqqjJuNTqjUKJRqTVa7Xx0lEmVyJTlCrAUA9LPMWp1txGeAReBRIaYMjAIR2MHRLJN8gSeWThsy6YAVlmYAW_eR5SBFQU8-61SHtfEYM1rRVKnaJoii68IcnU50w6goBHNM1NHWYAB6GD-8uBgyVKAgABi0gAHnxSJpKAZYz3MVBsbi-1BefQACSVOxWTQAJQA8jeACoAfQAClL7wAJBv4Mc2sfkCAQFYP4VGO0AgMAADWCIqAAUgAkpUeYQOAeDLPyUiyLiozlKqHQxBqk4VG4MzKC42EuLG8TyvUGoDoBUA3gggpgJo-KaCATGYW4eEsuQYDSPE6iYfCohBIBzIhpYF5gKQ8I8SGABGIBQPO8TwisSz4iyliiFA8J4HMgZ8BgqFaZ0Nrwu4eAqOwCIweASTSDJfDLqh-DSgArG5eDShp3nSgATEQ_lSpQwWeGZqISSy85oDICByWZ5hQBg0h2BeGD6eQy7SBApkhp02W5c-IBOT0mU1gVyWOAgfD6cAGAgABeBJSm0WKZgpDGQA6tIpANOp7UskpGBdRgXCYPpBDADN-VVQg5CkKQTl2OpmlVTAPTLlAADKUCOJYiUbV0aCTfgxDCK1UWtQgTXKMJaQSBhciaLdEDLAtOjxO9MB8Kgyx_VeAhKvI0gAF58MGx1MNAMAgApBa4PJG3zglqxEK1aLJgV8N5u4Vk6VA3mpXY9RE68w5vX8xSgxDLbSHwbA7eDfDUxOAUGJ4_y4GF2Mhru-5wwjfNoq1Y4Ti5KXkEgAH3pL-lsH1A2rAA7EQCCuZFQ0wEVEAlWVxlHVVShgBBlmY5Vx3LlKOUQHBznLllqCoC1x0pq1nyteKCl_UbG0KeQkF2I1EikBNFWECrUeu1VPYstdBWxagSmO5bLKiHw6jYnVachjaABaIAgGpucFY4Nu5fbXWp6JqCARbCfHQpGBHH7x37bVll4CbfAABrecAlgangEVu3HIbj2i2v-LlcBBBK5Bo8jnTDOwIliXw2vmIBqWhFXLnwh5W-TgJfCQA9AXHwgDNzPSHgW8vBWMoNFsndw8KsBw4cN8f5iPyGz9EQrF_p0UA794DIFOhgBuHstZmWDn1c2G1_6-D4LpfSGkACkc0NokzJvpAAHNgkB9Q-BpXwfgDyRBsFXWPigqI6D8BYJwVVPBel8BEJYYnDi-kABslBiEW1IeQ9heAVi8JoRtSeMBPYFWtrbJBVV6EdxzgZWwFJHBcLzqSQiGhKjkj6BUEBSlQ4akcAAcUXuvOum8La6wADJORzsYOGYB87GRANYwCbULYkSgI4sAzj5D1DXmkDePi3bxCcvpG0EonJaJZIJVOeBYnZQSYVW2-sjIVXoeYMGa0MZj1oa1ZRNVVEGOJOk8wCDSD71TsAi2FldFVAqSSDQxjpwUGJJYtGtdxJ2NtgEoJ4B3GNS8XwCJx1db3mkJBOSwTQl9ImY3DafihnzNXmwcZkyNoOPID7VAGyQlbLCTYnZVUolgBiRUOJYAqkwCSdcjQC9NZSLMrIkM5cFH32Qb44UOcUohBAX4qUmJyBt1Wcc-EgK-AwKkXQv5QQAUt1sW7GpdSX5uz8QAOQSD7Cql8Bm5Xsfs32JgFknKWecgqDinFHMWeElZVVpmzLNuSzZ2ymUFTWXS9lULTneOkaLAqHyWQFyLiXdwJSLYqP0k5CAfU-D3PkZXB2lkLQQmBRoDA7CACcBCQFn1kujQpscEVYv5TCkBKq7Zqo8Bq0VVVZX4AgEoMa9zUaEI8oIrF2q9UGotkagpV13nax3gzO-UrfluzAOQRI-kbJsDsg5MITlq4erKfVPipBLDQFZfcppNoWxBDpCA5QfB4h7QOs41-BIoHwkQOHEBb9MBEA_uwTgUDm0wBGmNcODbnKiCcaQbtvbjLhzbfAQdw64VmulTGuNqjPIZs7vgHuBadHClFOKHo0pNBH2aQYYF8Qi7KytRbHuVbDqlxDBxQOyhHDwiIJUDys6Cpcs6PQ2N8b3JSj8iA513cnEbo0GSII27JQyg0sqCoR7fEnuUvUaFKKQGXv2te3JcMFrAAfU-l9b6J7muOt-pdUogortUeukBTSt1ikg5oIKMHDDHtPUhzaKGL1OKvTWt25g704f2nh19RT4XzuI4u_S0owoUf0lRxpm7wN0d3TKMKTHyBwaxQhs9HG3ZoerRCqq_HcMwGfcJ46QrqWfotiR_SAA1NkMn8ABxMtaiutrq6YuOl81VHnVjUZ0UW2IwRrghpFfiVEGnOgwtSOcCLtAgA

### Steps to Reproduce / Expected Behavior

A financial candlestick chart, by definition, has to be (from [Wikipedia](https://en.wikipedia.org/wiki/Candlestick_chart#Description)):

> Solid candles show that the current close price is less than the current open price.
> Hollow candles show that the current close price is greater than the current open price.
> Red candles show that the current close price is less than the previous close price.
> Green candles show that the current close price is greater than the previous close price.

The example graph has only colored candles (red/green) and should have also full and empty.

**Please update it or say how to make empty candle after a `data.map` that adds to `data` array a variable with 1/-1 saying if the candle has to be empty or full.**

**I wanna know also how to have volumns all of one color (example: azure).**

--------------------
P.S.

I would also like to point out that the volumns are sometimes a color that does not correspond to the rise or fall (e.g. it may happen that it is red if the stock goes up).

--------------------

I also asked a question about this topic on stackoverflow.

You can see it here:
[https://stackoverflow.com/questions/78947862/how-to-get-in-a-candlestick-echarts-graph-candles-solid-hollow-and-how-to-get-th](https://stackoverflow.com/questions/78947862/how-to-get-in-a-candlestick-echarts-graph-candles-solid-hollow-and-how-to-get-th)

### Environment

```markdown
- OS: each
- Browser: each
- Framework: javascript
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.