Repository navigation
[Bug] Continuous visualMap handle labels overlap when handles are very close #21766
Description
Activity
@jgoncab-arte Looks like you haven't used English for your query - I've automatically translated the content for you! 😊 To help more people understand your issue and get you faster assistance, we'd suggest using English next time if possible. Thanks for your understanding! 🤗
TRANSLATED
BODY
Version
6.1.0
Link to Minimal Reproduction
Steps to Reproduce
Just open the link and reduce the range of the visualMap until the texts collide.
Current Behavior
Both labels overlap and become unreadable, because both labels are drawn with verticalAlign: 'middle' centered on their handle. As soon as the vertical distance between the two handles is smaller than the label height, the texts collide.
Expected Behavior
The min and max handle labels should stay legible and not overlap, even when the handles are very close together. For example, by anchoring the bottom label with verticalAlign: 'top' and the top label with verticalAlign: 'bottom', and/or applying a vertical offset.
Moreover, it would be interesting to add an option to have one label on each side of the visualMap. However, this would take up more space, so the first option looks better.
Environment
''Markdown
ECharts editor
### Any additional comments?
_No response_
</details>
I looked into this on current master and it appears to be fixed already, just not released yet.
- The overlap was addressed in fix(visualMap): prevent tooltip label overlap #21586 and refined in 06cd2ea (2026-05-30). When the two handle labels bounding boxes would intersect, both labels are now pushed apart along the bar by the minimum distance needed, plus a small margin, so they never draw on top of each other.
- Both changes landed after 6.1.0 was published to npm (2026-05-19). The online examples editor still runs 6.1.0, which is why the linked reproduction still shows the overlap.
I verified with the exact option from the reproduction link (default vertical visualMap with calculable: true over a heatmap):
| Range | 6.1.0 (editor / npm) | current master |
|---|---|---|
[49, 51] |
both labels drawn on top of each other | labels stacked with a gap |
[50, 50] |
both labels at the same position | labels stacked with a gap |
On master the same holds while dragging one handle onto the other, since dragging goes through the same label update path.
So this should be resolved by the next release. The existing overlap cases in test/visualMap-continuous.html are horizontal only, so it may be worth adding a vertical case matching this report. Happy to open a PR for that if maintainers would like one.
Thanks a lot, that's really helpful. Do you happen to know if there's a date for the next release that will include this?
Regarding the tests: yes, that would be great — please go ahead.
Version
6.1.0
Link to Minimal Reproduction
https://echarts.apache.org/examples/en/editor.html?code=PYBwLglsB2AEC8sDeAoWszGAG0iAXMgL4A0asAHgIIUQDOhq66YAniAKaEBEAxgIZgOAc2AAnVtzLNYAE0H9CAbQAMJWAEZ1AJnUBmdQBZ1AVnUA2dQHZ1ADnUBOdRrWatm3ZoObjms5stNG017TSdYbRUAXXJSclYaekZyFnYuWD5BEXFJaWZ5MEVYVWcdfSNTC2s7R2dXDXcNTw1vDV8Nfw1AjWCNUI0HGPQ49AA3egBXfmwAWX4CZBTYAFsIaEI1JeX-CkIXTZkBbF4J7H4AI2x0sDEJjjz0MQ5pyGX0gDNpunultYAlfjQYTpJgyWC8HDiZTcADEeha5gcJikGRhhhMVhM50MKNhVkM_Fksg0uJhF1kDg4DlJHBU7z071spPeLPe53ezI4tIcKmZ8g45hJ6lh70M5lkhj0pNkVj0Km0VlJ_BMKnl5m4Q2YRFieW-YggHAYxVB6Gg_DePAA4vwJnQ6BBAVIlmxODwABbPMDbEBOmQFIpKJboEqwVwqqIPZgh9zhyPB1yeWNB4qubxJsEpiqwdNgkP-HMyEOBAtR1zBEvxmrZ6JxzOwcIVusuUw15PRmOtjPRxOd3P1NO9wv1XyN6P5wel5zFieVoItiNt-qhUf1BszuuRee1pTuMOGAB0DgchkiDj0mNVl8MC67jVMB4ctlsJhM2lsmL0Jg65hvufciYfWw9HMREVEMKwL1VH9t3cNNAPlBVzFscwXxUCDoLbdwRwfKx33MFQHDaS8oN_QsY3vQ8rAccwTz0OjH0lWxSKjdxi0AuV8VVeFtBMZjg3cctAJ5WwmgGbQ2lsa8YKrEwHwcTEOiaKw-OKdwGxMfdVVsFRzHhQwWjAxEVJ3OpTA0-U1SsPpINVKTMOcGNzLo2T5JMM8ujs29nETczwO0cCqM8v9nDTcz8JQyUaJEnjjMaEdzNlHSROEzFYucfNzKA58CJoz9ZIwryAjMzSHH80rDCRNK52zczHyQ4CrEiNCRKqvpipcbQ9Hk_y9Bi6SwnalQuqsGiGiAyJgKqzcav3FxaKaFViJUXjt08MMHEPNogsLZpTA298eP03DGpWttPETfbgKUybVvKbN9oIwj3xMXrTq7TwRw2qiIPPPzjMTPb920zrVVwhb_qqe6gZ4hoMRGpbtqjTxy32kDJSabjFrAiHYGXDbStfPzeoRnGG3xo89FsHjxqxxHg2aVx8M0598KWy8NBxhoLBUWbvtsHkIL6s7vO5_cFUatDsdurxRfPcXGtlIX3ucXwmbFLaTF07ROf8JmXufY8XvB6WulF1mv0METWdVDmTeCJmaIqz99ON4WQjNqzBTQ19iNtt2BjNqnqLcs8eJtnHpodySmO3bxGYPVmqesrGVD9rtWgsA9wOW4C3356i09zbxPBo_dP10yUeR6N6i7u0uFX88xtDPQjU814zvFVg8QZPKzZI7ypYHryn8rPfDPy6Aeh8zsu28Wr9XfT6oh6zyJDAshpPzPZTY6rUu3JB_DUt3-sZ5ElQnzfEbdPMWUp-bIewpQ5ukOPttWlYjS9DFJEz2W0rqKDBPk0CwGldJUT6BiGO78QqgMPP5C-EUgKg2gUvHwFhzCzSrq-BBz17660wSeSIEsrBDUXrXIqQ9MH4WykhIOR4jz33tpg_EPVkJvlfLKOmxRWihBAtDF-IFBRlUYcA8I_DnyNSArfJqYMp6R0wewoC5DCy-EZrYIG-kCq5naBYDRL4IKpyQoXVRZQh4aI4vKb82l2bGV8N4JCs0xLNz6PscO25fCqw0anZCjUaJ2MHo4-UekdJKx0ZDRxbQ5QdBfgE2A9sLHaStj0PQcS-EaNlJvCqI04niI2n0HKbQwmmM0IzL6c04lc3iTzZu550Je1sR4kW1TDypyKa-Gx7i2ztG8FZfci0OifnEsRbWTT0HxO0JpEw0icqVP8I1fp6J3zRRriU02EzDyU0MJKdClTgiyjFpEZ6WsGGiO6c4UIByuoEQkh0U5QDzkDXiXofcYpv7CO2fcuJ00DngVfMZfwZZJn6WGdvVZUZOjWA0K0kFAw_Ga20Nows_hkbQvRNoBULgwUArun0lwiUJqSKITi2AvhSGbRaCskl8yeb8wxDIhohF15IohZDPpaEnooKaBVB5XZ5lQteSBd8XEUlU1QbmfwlzJnLSGpJc84Lgz-HCAspJQ06IVXwtvElD8DmkPwvlPB25OgCQPKQsCI1-ZHMfAq4onRkYaVlNRKlRrYHxJYbfECPFFYngGNqslVh9wK0fL45OqdtXzP0UhJZBimj821YEKiYsxTomxS66qibZQqgxZLbilttWhG0ppZuGIoHcoYdq8IhaOiyVVNRSUL50QkumlWzEYNilRkCGWDS-KQ73PLdubo1gDxyhvlm1-NqlCBGRi86ZkkIJ9G4ZO3FLyhryifJbJ8b8uyBDJZMxEXtv6dS-QOweCyK69UFFZQ1bZAgJsme-bOyFF0JusC8k8IEjwKmmVu3MgRLnd1wpamRxlAjKq_keDER4aE_sLN0MsLCtkgYctYDRGKeSEXede7dzSM1nm_lmrqpykMy1xtC_DmJtKyiw7-lWdhJlUWDVRIax6b3pTsAeb269WHJ2I-s58s0dLAVmSe6q_Hso-yPBffEj5eMFswc3Bimteq8crYQ0qQ1ETrwffJYjzbMGvmU9uYI8HA2gSvTBqMvRrBgKaG-RjiKkSLuCMjA8msgJufARO4IvSXncaRARALTcvNZgORi7-pD_KjLbOWV9zM0KkLPCqaZgpjL21i5-WUmIo0qMs8vfEmkkJHx6rhHkLLgzBEuRpWR-J3ksa7MEZVLCGhmukV0IxqXTLxP0b1SS4lnqNOi8h3GPMMTN35ied839zwdY8HRwNnVNZgWCyRySQMIrHQvmhYlRnaO40UehLqvVKYWfK2x3GGiaL7q9b1H14rCy9FAzzTbQ0AomNy9VQiTjdLAVksg72M22r1mhTV5az5OoiN5bmXo4RSqaVhmBYCltuU70GxEVwsPloqmijyoj25QhlgDXKI9fb-1tn6NZwN1zqJ52MqEFzZc-jDLAndqMoQfO8x2S-KLXZQi7tef5S2R4gJ1dzMuawky7kTr4eL15lM6Iac6WGvHeWXlvi6i-JJtOqz5eMYKF6ZXiihEa_0iBiIVSLv6GWDRT5qJa7cHYNFSJn7bJZ8GfonhVs8U9dYu3LQ7ABtTkG7novdv833IKcbWaLdnc-4RBUvvQO-fxKwjpvuGvds6pu3qDGjwo55xcxwGljxNEltHp51ExZPS6LJQjUG7fTQr9_J8xlwgmbMwReVLfSjxITpJQUFcm5cNSducIyN72W1znRauXfYC9LI-iX7fkhpfgN0ocIZKebE1IXLPtM_db7UvhTDyoTV_iOsDzblKp_Nx4ncqgVOkeh9GQm5CqGKZ9SvD5Iij8IZ_KofFvUqLheFPPXMcIHVANUhErPrGyN7YMMA9wQtZ8ZCIXIVUGSHQsMAj3buataReSEXDA11d8fpZCXSY8K-KbdAqMMA3wHkQNfEJuHiJ1E7YoMApVGdM8d9S1C-a1GfdZJEIGSbbghoEZXghrANLnA2OUA-OtXgo3SNOWIaBuHlV3Fg5wGHDRIXMCVydyG-GfBvDaJKTJdtfiVwLtWKeoGXI2aOTncwsxclL3RXJaWA1SVMPRMuKKSQ6TUnW8VwVWAPBuWw7MDBMuESdzVNTCRmYIgzYPMiMsCwANCqH-OVZgncVwPhDaN8PNGCdHAVKmGiIfFIh-HVCdIogSC7LqNrMFAbHw5pKmRZC-QIv3PbV5CCeGKorpGo8ZWg8Sf5bImPGdInAoko-oUDeTIZRohrVDDTBiX6BhYYgvesDadeDlEnGTPo8vfGNrLeWYo8RdB-aafYWKXcGXc8YGHjGCO8IeJYsUWUV6eEZaMUI4sxfhE6XPL1Qo2CGeCbR_SSF6BiPYrCCwejS2DdSUWvCDJ4oIoeaFOdCLYvSPYw1SViCwGE47c3KfREncASIEugziOiREb8TEqpPhBOTWPDG4yE8RBInSVoroX6TVSEnVWlJENeV-HHFQrEobfLRLT9IAxFDERk5GDIo8fYTEAEwg3zHiT8C-K6fCHoRk3wIgw2BoUSKTCqDkqpDoRwYHWtICb-aiDvEAsiRoUDU1fEV_W-EoxoMQuHW-MVa-YCW-RkuQkIqfOXG7bwv8RodQyiL3PSAyR4i4nQdHAw1-TGWKNaCwAwt5VYs5W8XaR-cPAkiWfSCM54yZL8WpTWHPT0siTwNMB6bffFI0liD6UwCAmRV6JoNMqEzWE3FUQknHOMv8EuUwTBK6dGHk05Eo5GcsrBF8UrT5U5VfEBXGQGeLZPKyGI0s2oaEzZM1DFeUmCBmOBb7Ec5oVifGFCSSJZZwncZoenXXQZdc11RNRIp2AiM1VUac_iZoRUg8OaC0qyfAmcvwOwVDTqdecM5cqcbU8Pc1fU-GS8G81SZoBrDjXCBUS2CHY8GswHfg6ZcqRqeEU5DU5oGHeTE8GUvCU5Pc0chvdsjdWKOOOBN8VmbeJsyg_iDOOc7JK-NdIsnSYisxDETZTqDoJ8HoZQkc7wOCIGbiPORI5yDUzuUwYFamfSeEcEwotMFsTaF8RCkOTVECncBxOSl3F3cSD5ZssiXpUwaFfFH-OUSUcCfxGCbwZcSZKud8PoY8VCko7wdSUzeVfEwiBFb-Zi0pQGFyCCJg9khyobUuZnJKZ_OylSpo0cxxSTTqUhSDXHTCVoXpDjQrNCYrfmJi8y3bXCQ8aZaZZaamaTESs7ICMudWM1eEKjN8TyvjTBA0xEVhOUaov8VoCrDaYRZ-NpbY6qo3aFTqW-blbHXPaqmHaFFudycSUqNofETyhvaVVCQal8_iNRFE15b8NmYiEo3RbMANRFV_deFxMOZaWKXwRMF5OiF-IiRXPC-xIwVGdee6gksOa6rMcCATAiCaJqdmPYkcIwKrDES2LWFZVUTayGbZV5eSAiJHa2NuY65eMGwiFCD9ECBaJXTCRUowfTT8ZRMeX2EG0-UlYU3qAYPoTGeUWGry7MFdZNdajov8doGMcQkrSCtyFGyeGCdoEuPda6BXXG8mpo2-aGFybZb-FG8K9oPnB9UhJ9Jwvm-ZBI_k4NN8Vmvmv9Ay1uGJA04CvmirF5AuJ6bSBoMqb6hY_jECCeOGXtNYtGtQuwQhCyXuI2MqMW4M22_pcHGmsmmCQFPskaBqc4zCSFSmhnI9RqZuLiUrWKFFW6grfECSGwr2u6dEMWPVJlVCMGYfAOl6iXWK51TOqErqQ8Nys3AYMCZuEs_iXWfQDQ_YS0ttEo_lWfAw3ORSqDDvSOqsdeV5VOKDajMiJVIwKy2STEZufSSPDO28ToXw_TelH4wo41OSiDfU-EGiUJF8du2bGaOqJHQ6pqvu11QUMWVObORLUHFLBO8ZfhMigWW7Oes7clOlEaRqRlIiEczoBNU1GK6AlOPCzofZcQi2QBITaUjUzoS5Qmt8CaMtHTc-gOYbKZRlTqeiXrEBl2uB6uOu2KTtCib7S2vtPYwdAmnK81PXPBzBsxJO9EPyQUSueK28QITuMjKiZCbSFC2hv8HdfQANeSdWSG8EySMh_OjSH-WMngmCW9fQDjV8dTVhhhfhsR5eOiTRNyVmUg2RgRtnA8fmYCKsgYNR-R_G88WaFyDEEmxa1SODIwEbYJWMjU7oLCD-qyRqcCe5ZCAR0ciqfpLHfOYXU5fB11WScPetG3dTDatxz6QJ8-Q9Phtx3WbAlY1Ytx29bxPoGRMyzCbofZWlXuX-ZjBhPC7oD_WdFoZPXRuvfR2Bq5Oi6iVR4NARn5N9BSER2KYzMSsWJuWteVYiEcqzUlBInoahsHbZF6Qo5zAeynXKeEICSCcu1SbzKu2XIOBjC9AuZprMb-UzLwiB4iaamCGLWfUauGfSBfZqCaVZ6eWfGpDTRx4msODU_ZHQNqymeSddY8fEu-XZqsOUMuYZJubPYiO52c3qQ5DFK9dELqQZs5h-T8Q5edczLGHJD5-3Ru2aLqKKJfIZcev8XoD6F5OhZlQxf5yFzufRHldEALUrdVSFkcM6xEQieSSmfrbps7ViwKIZWVf6qqxF9ZA-lUFK9GLpvY3oe2ADRuWpdW_uLlvhIvd8fzLiQ6zFsiaHYIqjKmC1FCFUHZzCZzRmRRJuZRHekiGCfHOSwxZY9atmzCcnUlDSZBeaRxxacKunIwaFeUDEfDN8EQo1u6YCTxySbuuiSCBVliXnfQPdXKRFLaT1y1weZuE3CZtyTpoaWKaXCIBIw2ah57a8jUy5HQfTdp95Cqh15NqsRFTRLRtzJaIN_iI3HQCxLCkCUGQNvYy3fQHmYvaGpaRFYtpF9Z5NflkSSCR15pSmcPWSJnS2EZZt11SULBSjTWYpxaT8bttoIwCAxaedP13e4N5l0a4RfmZIgZEc_oYsDSFfJuaxYiKt1SfocsDRHofVlCLiiDEo_oPGfi4RTNXfL1p5PWGiGK76TZ7tyOHmKNRwqN28VvOS4QqxfrS8VxmCMA362aBUSmNVegp2Eo0fSxpNa1bZcSSCKi1ScIXisBNyI-wZyh8K9ffQaFSDDV_SX2WKBsWtpNC-PyMOsCVGiDyGHiJRpEThG_BoJj5efyRZXKCLYVXqePBDkt1eMURQ1uG2NoYT_G3j6CxBqUlwDXPYsAhMANG-DlcdG2KWTCeA1t-bNpAfFD_KFT0c3tw2L9VD4zkcsA3ii7ah8Fg6fdbZWzzxe9SbanC1C8QjncVgjG_ir1OFfkgfWz6cWaXxXqdyLd_iMA8sejRlXOYJ4RWz5cbuOlxKOWRaFzm27MQCZ8DpD8L8duGTtHQaeaA1ho1aUwrcM6Cw61zSZaJjJuSi1faaD6J7Fmf6Vw2fcDQiDBprtZgy6ZcEvtGZpQaaFFcQ5ZUrTEyOHQTR8qD2z21rkT1XOUUqXO96NInQPdeSXrnIiIM696lblOJNibim1b-of8fTiauuztob4dtt_XD7kjdZqyQjVe3m-7ld2ffROVJp4H_wE8MWbRpWx7389rx0s1tmPcg44IV6zLSTbr3xn7wHDxtDXB1C3H9fA_XPBakUxdPrsMaIJYZiDgZYEAN0fge0I0E0ZgCAIQZYAAZTYCuGSAzHQHOHEFkA4DEAAGFIQxAeA4Q6JfQBehexARexAAB1CAWQMAN0PYZMbUGQEYZgEAMQYAYQJ4O0CAUYdINxSMQECAbYSAGAQgT4bAb4WIGIIgIAA&_source=echarts-doc-preview
Steps to Reproduce
Just open the link and reduce the range of the visualMap until the texts collide.
Current Behavior
Both labels overlap and become unreadable, because both labels are drawn with verticalAlign: 'middle' centered on their handle. As soon as the vertical distance between the two handles is smaller than the label height, the texts collide.
Expected Behavior
The min and max handle labels should stay legible and not overlap, even when the handles are very close together. For example by anchoring the bottom label with verticalAlign: 'top' and the top label with verticalAlign: 'bottom', and/or applying a vertical offset.
Moreover, it would be interesting to add an option to have one label on each side of the visualMap. However, this would take up more space, so the first option looks better.
Environment
Any additional comments?
No response