Skip to content

[Bug] VisualMap slider tooltip labels overlap when handles are close #21585

@Resbi-Anik

Description

@Resbi-Anik

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

  1. Open the provided reproduction link (ECharts Online Editor)
  2. Locate the visualMap slider at the bottom of the chart
  3. Observe the current selected range (handles are already very close)

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:

  • The labels overlap and become hard to read

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

- OS: macOS Sequoia 15.6.1 
- Browser: Chrome Version 147.0.7727.55 (Official Build) (arm64)

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugenThis issue is in EnglishpendingWe are not sure about whether this is a bug/new feature.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions