[Bug] When zooming in such that hoverLayerThreshold is passed, hover layer contents are not cleaned up
- 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.

### 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
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