When using visualMap with calculable: true, the tooltip labels for the min and max values overlap when the slider handles are positioned close to each other.
This causes the labels to become unreadable and creates a poor user experience.
Tooltip labels should remain readable and avoid overlapping, even when the slider handles are very close.
- OS: macOS Sequoia 15.6.1
- Browser: Chrome Version 147.0.7727.55 (Official Build) (arm64)
When using visualMap with calculable: true (range slider), the tooltip labels for min and max values overlap when the handles are positioned close to each other. This causes readability issues.
Version
6.0.0
Link to Minimal Reproduction
https://echarts.apache.org/examples/en/editor.html?c=heatmap-cartesian&code=lZbNbhs3FIX3egpuCtmAk0iy5R8ZWaRGswta1AW6ELSg5Yk0wGgojDiJ3cb7bvsEfcU-Qs-5w0MKKIomgsT5yCHv4T3kjPjmjdt3VYx11b2qN23oqtE6tIfotqHvDu6tW44cPuPpzI_PcLFy4HMrL6ycW3mJcuh-ZfVrK2-GkZPhwggKubcWKwc-t_LCyjnKoeOl1a-svLbyZhg5GS6IMFrdjv4zlUf_fJTJvY99hyYOfd_ViX7ZIl3jodev1WNbDQ242Wf8ENpE973R_yhHT-Xl5MzhO1-dOeIU34Qz3Eh4XvCi4LzgZcGrgtcFbwpOqSiG3kwMwQsxFDWPKSQzQ_NcDNHcH6qXYsjmduiKZ0xEDN3M0NUcZtA1K3CfuSRkLaFcYYCCcgUoV4ByBShXgHIFKFcooUUgyxWyZkeGomVJhuSNGJpTs4gVqOZOkM05QPdaDOGpotIXKdOXzFDWYPpi_Zl-Wg6gdgvnmFLBVb5wPQvKF6B8oUBB-QKUL5TQqpHlC5k_MRTNCzIkLU0yfcmB5AsZspYmGbqZISymLZY-mUss1oLwCmFrZ8qpO3dumjJNS5kAZQvHFJQtXNqCsgWI6VmezLG05u1C1uzIWjQyf_kGnyLNyoyxJFiBrrlHljFkGUPmhpE2nTEnyUfadCazHmCmWlDOAOUMUM4A5QyunGNCOQOUM1zmgpiepUMJvqTEmh1Z62ZGHLVTVUzNXIHqYBIr0M1J6Ekia8cwI21VMp95MZ8JsXLluqcJUTRFB8oXvunSOKB8AWrH4CpfgPIFiOkprnaMPQgpT3tZFD36YhmQbWepwjUQU0FMX_JovXjJWhCyfGFG8oWsFSFrRcjyhSmlyVGntMoX4FFf-QKUL3zOC8oXoKbH_V6QvmS5I728X8jazWRuWDFXRnwkSlcyH8nSlZzPkS5dkVZ2hWwv_JX977_e-f3Jx75dxzq07qSO1e7U_W638Affd61bsm3JmAYUMpit3JcvbvxqjPPAy-ntKOwtxFsbHUNoYr1fpFD7cKh5d-HGMeDw4twLjx0bnEbUZVvVm21Eh_nku3QmQVfUp6hrwNO7p_qgEfF5X-H-2sdqEzodZHgCWQyHuaHhsG_q-K6r0DqMQ9M2fF642PWVNbwo_PPXhucB65ujf6oPvW8--OzKroYhkyHOzj8tsGkmqbr2zbpv_EODKTDS0Bq6umrp0Rb0W2ijb9K0muoj29e4XXWp7SHEGHZ0cC5HO99uEHF5M-eLB2orh6Pc33_9-Yd7_-PPdz-48KnqGr8fac6HCpKwZDhKKsPW72jNT9g2W3fnu8cUPpu2rXzExsrNci16tSC3qime_cu1pM9Ptdtv_aEsDD_cgffxmfaURgbxj-Hz903f0UwFKHfuQhNwa9xtHvzJcETl9_X8lFss6Uo_r95q9HL7Dw&enc=deflate
Steps to Reproduce
Expected interaction (if not immediately visible):
4. Drag the two slider handles closer to each other
5. Notice that the tooltip labels (min and max values) overlap
Result:
Current Behavior
When using visualMap with calculable: true, the tooltip labels for the min and max values overlap when the slider handles are positioned close to each other.
This causes the labels to become unreadable and creates a poor user experience.
Expected Behavior
Tooltip labels should remain readable and avoid overlapping, even when the slider handles are very close.
Environment
Any additional comments?
When using visualMap with calculable: true (range slider), the tooltip labels for min and max values overlap when the handles are positioned close to each other. This causes readability issues.