#20322·echarts

[Bug] Candlestick graph candles (solid/hollow)

Author: GitHubWebStudioMakerPerfectCreated Sep 5, 2024Updated Sep 15, 2026
Labelsbugpendingenstale

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):

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

Environment

- OS: each
- Browser: each
- Framework: javascript

Any additional comments?

No response