Skip to content

[Bug] Continuous visualMap handle labels overlap when handles are very close #21766

Open
Open
[Bug] Continuous visualMap handle labels overlap when handles are very close#21766
Labels
bugpendingWe are not sure about whether this is a bug/new feature.

Description

@jgoncab-arte
jgoncab-arte
opened on Sep 28, 2026

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.
Image

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

ECharts editor

Any additional comments?

No response

Activity

  1. jgoncab-arte
    added
    bug
    on Sep 28, 2026
  2. echarts-bot
    added
    pendingWe are not sure about whether this is a bug/new feature.
    on Sep 28, 2026

  3. echarts-bot commented on Sep 28, 2026

    @echarts-bot
    echarts-botBot
    on Sep 28, 2026 – with ECharts Bot

    @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

    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.
    Image

    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>

  4. noodleslove commented on Sep 28, 2026

    @noodleslove
    noodleslove
    on Sep 28, 2026

    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.

  5. jgoncab-arte commented on Sep 29, 2026

    @jgoncab-arte
    jgoncab-arte
    on Sep 29, 2026
    Author

    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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugpendingWe are not sure about whether this is a bug/new feature.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions