Skip to content

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

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.

Activity

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

    bugenThis issue is in EnglishpendingWe 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