apache / apache/echarts

[Bug] When zooming in such that hoverLayerThreshold is passed, hover layer contents are not cleaned up

Open
#20,971 2 comments 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.6.0

### Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=heatmap-large&code=DYUwLgBAdg9glgZxBAvBA5uAcvJAJEYABxACcAKASgG4AoUSADwBEBDMV1CAbQF06GEAJ5sOXPnViIQAOiQgAJuQCy7ABYzSrKApgBbKjVoAzAK5QAxmDgwoGEFDLsQo1uTBrwrADQQ9cKF89VkZKCABvWggIQQV2TjQJKIhjGFIIckE4LgAGaghsgB40ACYcvIKAakqwyOjo1PTM8AgAK1z89uKIAEZyzura5PqIAHpRmJbGLnJg6YBaPwCwgCoCsYgynIhKpag6EejxycghGbmIRf8oVbaNvu3d64PDuI4ZIlMENXJuOF9Wr4pEgPmRgAESuRshMACw5AEbMphXY5GQAVl4RkOYwmb1YHy-Pz-AKBaWCwGYiDA7k8HF8oQga1gpHJlIQ1I8Xl8QkomJe0QAvsMICx4gTvlCsRAhQ00hlBO00BUur1-m1BhFhSIxZ8Ja0pTKIKRwKZSHY8XQhbF4lxMI4tGAXPFyCVfPM0b40UYYERrLYuHUIGAYDBgNYiAAuCIC7zJRgAQUYiCjgeiYCEJCjAHILM50GkhFnYyM8VHRRxkjHkkJE8nNSN05mIDm8wWi8LS8JXJXixAAG6IUysYCqSP1-rXKPw4VzKM9XvRXPACymYCsABGoCjYFIphAC6NIGH1j0ICjxmHSAPAQAStpMCnhYvQ2ko9wn_UswBiADMPR_ABsACcaLtti0TfjCaIAOxouuMJgeB37QTCrAKAoPSIdi34bgoQEgEBWGHN-IA5MYP7GAAHERIzfsY9HGOuxg0Z-X7GCApFATkLEQWxcQgABmEHrRbEwgBCgwj-PHNl-CjQT-OQlNB0k4Wi5QlABWYfrwwqGlW0R4gAWiGeiPtijZns2AQIHACggIh-kQEgpBwCACBvsKqb1FArCntmADirBfDZ2gsRZ2aeOwwRECxnZ4sJEAgHoRBqKwNnueO2JwI6egAMrplumXgeuaR2aQADCL6kNmv4_lJCUjCVpBlQA6rZHhzh-gofo5IxEKQMDoMaCA2X2lkPNO2LaHAwR-lA56XiAunJDpAp0OMG2bVt207bte37Qd-20McJCkOCdjAsgnjEGQKQDXoEBqGAYBEO54zoNlaimOuMgWPooytDASApegoyXa0CDHYd0Mw7DcObSY5hWDYdiYGAODSAQN0UEMi5riNED-VoChFX9UDsruVhpOQjDcr4ABeuOHB4iAyNMaCMPy9QswgMhnGgQhc2mais_TXD01zhoGTAYCQrTwhMyMxpgKadg82zjIijsQYi7zZxrILy0ljLP403TECM0V0TK6rOus9MazTLs6v68I2vq2LawS0b0rJGT7IYMTP7iMKjgAO6E8T5Dzr0vg5JQB7h5HaHkPMMcx_HicgBHRMpzHadxwnofZ8nSgF5cGdFyMSe50oGe-D0VfeSXtep_XvRN9ENdR-3aed9ALdR-X8IV_33cpyP6dj4PE9ulPWc51Hk9z9Pi-zxXK8rS8_uQEQIcjD0aLpwBk8_tBvhATHXENx6vR_g3P6-GUV-30BAGeo_vRATCT91b45-bBKLfHocIDyAQbjkT-ClfDAQbjCV0EBKIXyAr4M-T9QGbHTiPEon8ejXwgO_XoMIkGbBhAAnoZQDw4J_hAWCccn6ELwQAgCCDv5PzRAgkoeCn6QIbj0ABP5gExx_AgmCDdoICMfsKSiJCcHkJhCgiAaJCGUXIShHhDcgEP0YdBY-JCAIkP4bfdRvQALGPnMKf8ND_yKOIU_chAFCESLgYwtEsj76INwT0GOJQSiKIoQgk-T9vEPykSMHB2DKGqlfggmEMc0S3zEugxJ2CYTWMUnAz-aIaFmPYTA3BgkDw-J6Coke8keGKOgowkRDdVE8JIZRfxhjYGbHKA3N-D9gHQMsSU2phi0SKMoowgC6TJ45H8UBQx5TehDNQTAmhHDgkAN8YQoBk16gUOsTgz0PCEE_kMWQvhhiNLsNvpRBBlFb5cM4TkZZORCEDKfkpA8hzTGeimbUhBPRGlPxIfAp5uDKK4Ogtg_8fDFElDsb0RZmxfBpKKdkhuAFP4gqeenNEuCcjouAQBABklxGsM0RCvZEKMXtIvkgyxORDF9H_v4sFgCaE4K-dBQxly-FfJyEy756DCFAWWSUWRR9UE_2FJCr5QFP44NkbSohWz2np2gv4lh6CY6UXienKCv8rkKLgVQn8_jblwomZwkBqD07qvaYa1x5DKI0LtTw6xVS-HAK4QeNScLXV4pvtgxFd93GrJyK_KVvi-E5OWRCmh0FOH4ssXEzRhiQL_30asw-MD0WMMojkLeyRjgABUYCHj0DAMaOtkCOEUCkOUAQ7LTDDloIgRAAjoF8Lob6oAy0QFOnoUwHA5pBg3B20AUB0AeGSIIbtXAk7xlIFoIQ5Aj4lClIIIaaEAAKU6S4zrnQuihUp826wKAgKAWZICcDGqQM4-YYAk3kAoZtKQkZzV8OuXtBRIBhzSAAawQBAGAX6ZAQAAJKQAQKYRtaQwC_pKAAPRKbm3EcB6JkAcKBjiJM-zDj3LzCALUXKOicvocAIsR0QHXOAR06QkPCBgKYAelbi3Gicuh3myQzCWH7Xe8gd7FYFGMBkO9EAAB8EBtgADIxPMcrYUDuVscQQFykuZAnIpMk1o2AD8gmVhoDMRigCkthSCbQKoDwMhjDABDBQHjXNqPcfQxAGTQCAK8eiIJgAPmgQThQZOUQMyMRo8oWjZCVPkIomxlGhY1F5aIgg-xCz4xkbIknG5yeiH2LgRA_i8AgDBgT9nJNAK9PFgUiVgBIFS_2DLWWcsZDs5WoTInKJhAKwkqUIwpb1G7dVtAXXsi7Cc9ltAcWPyroUGu7rgd11_G1gN20QduDpYAKS9BKPwH2houPxxeMcL8u3dsQDXWCAI0BcDIHZKYeibGn0oxSGhEA7heM2zNEGTWkA1hvYyB99wmsAKXGhciVUBorscZu6AUgRByA-DI74MAj2TTPejn92HmtODO01uuF4hpjglGYAdo7dgMZIGB8jf0p1zpy25Lx44AAxGtEBzDZUDrZCAFhCDABZ7YDgAQH1EHgFADTIxBAAA0uAmY0OZyzNN-7RAAJqi_UGZiz1MeRc2OP5Foxo1zWFLYwM4f1SoBGcL-mA_HecBA_Z9Y7Hh2As7Z8KdmWtFhC65vzN2iwZeq4mHh1ge8VPm5AJgdIrPgBlYgDbwrAnyRg4KPzgPt1To2BJrmOw5GY87hvaYVnJNPDGkoMKEXaARctbRFzOXaA5fF89xAcqw4Vxa_Ladjn_OXKvrmr-4w91EqsAsGoP9_GVOpFNBzs0ZBIaC5aFAcoc2psi92F1mXvBeAyF0LLM2CsuaCEnz0afY3uCz67WQPQ3A5e7B6Iv5fMsKdu47hviffQd_jf39vufh_j_n5X3LP7McVfCk394h_e-2sz-B-LIx-QB7-l-NMX-3IX-bW8mlUyUvaymngt2dkLOpopamGwAe4Va6QjAv-LQdGaAF4dkUuVeQGse4OoYzgnag-6Qw0q4UGwoT2dgYOEObB5Ak-I8UAsqpgCckw4OnBWKQIIS9O_BJB92PIQO1s8OdgXkd6B4ZOEIlYloQAA

### Steps to Reproduce

1. Link goes to the 'heatmap-large' official example, with the small change of adding zoom functionality.
`
dataZoom: {
type: 'inside',
},`
2. While hovering over the chart, zoom in all the way.
3. Move your cursor away.

### Current Behavior

You will see a graphical artifact where your cursor was: a highlight of a rectangle in the chart.

See: small black rectangle, which at a prior zoom level was a border around one data point.
![Image](https://github.com/user-attachments/assets/575ff856-edeb-4ee1-af0f-e8d157f80b87)

### Expected Behavior

This highlight should not linger as you keep zooming in and as your mouse cursor moves away.

### Environment

```markdown
- OS: Windows
- Browser: Chrome 135.0.7049.116
- Framework: N/A
```

### Any additional comments?

This bug is triggered when the zoom level changes such that the chart element count passes from above hoverLayerThreshold to below it. The current state of the separate hover layer is not cleared as it should be when the chart is switched over to drawing directly on the main canvas layer for hover interactions.

Contributor guide

Open the contributing guide

Research direction

Start with the linked heatmap-large example and reproduce the issue by adding the shown inside dataZoom configuration, then zoom across the hoverLayerThreshold boundary while hovering. Trace the transition between the separate hover layer and the main canvas layer; done means moving the cursor away leaves no highlight or rectangle artifact.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.