ShanteshSindgi opened a new issue, #21744: URL: https://github.com/apache/echarts/issues/21744
### Version 6.0.0 ### Link to Minimal Reproduction https://echarts.apache.org/examples/en/editor.html?code=dZHBTsMwDIbvfQrf2tIxwgYcVjggEIIDAwm4UFUopaFEtEnVZLCB9u7YCZQOQQ6NbH_-89t91MpYuL66mN8-nFzdzW_hCKaMsTTwlZJbjqksT4NaWCi4ERgmSrzBKbcimrDJdARsBLuxJ155vSBkPw2edAcR5STGLMXrcPgSJpIkho8A8DjhhN6GLdglA7Czg5EBqazoUNVh3-r-TiC65PZ53HFV6iaKYRvYeD9Ghb3U4fIJIo8eAov7btfEC-NraJxYmnTcLsxzlJGZEcwXTSE6z4ytPpNLUUbTOM6xYR0EurVSK1TzA1itayvb2VfoUp2sKtHNIORLacJRX6DwWrvBkAe7agVCtVQihLWj1h6uRSVUOdQstLW6meHG-xQZn0EWni8qAZcCX30E_C8v0NITJg7zoWTVyT8FD9iQWh6jxYE3Kxvy5ourX0W3ob5Kdu41SWY9IZWRJSG5Z4zopECJrLfxY4iO4g21_TvRz_Buz4P9bVb8aui7mTerptD1jXzHvklf8avPg3X6CQ&enc=deflate ### Steps to Reproduce Go to https://echarts.apache.org/examples/en/editor.html Paste the following into the JS tab and click Run: ``` const POINT_COUNT = 2000; // change to 3000+ to reproduce const data = []; let base = +new Date(2023, 0, 1); let value = 5; for (let i = 0; i < POINT_COUNT; i++) { base += 30 * 1000; // 30s interval value = value + (Math.random() - 0.5) * 4; if (value < 0) value = Math.abs(value); data.push([base, Number(value.toFixed(3))]); } option = { tooltip: { trigger: 'axis', axisPointer: { type: 'line' } }, legend: { bottom: 0, data: ['Huge Metric (20k points)'] }, grid: { bottom: 60 }, xAxis: { type: 'time' }, yAxis: { type: 'value' }, dataZoom: [{ type: 'inside' }], series: [ { name: 'Huge Metric (20k points)', type: 'line', data: data, symbolSize: 2 } ] }; ``` With POINT_COUNT = 2000: Hover the legend text at the bottom → the line highlights/emphasizes correctly. ✅ Hover over the chart body → tooltip/axis-pointer track the cursor smoothly. ✅ Change POINT_COUNT to 3000 (or higher, e.g. 20000) and re-run. Repeat: Hover the legend text → no highlight, or highlight is unresponsive. ❌ Hover over the chart body → tooltip/axis-pointer still work correctly. ✅ ### Current Behavior When rendering a line series with the SVG renderer and default showSymbol: true, hovering over the legend name (which triggers legend.hoverLink → series emphasis styling) works correctly up to ~2,000 data points, but becomes unresponsive once the series grows to ~3,000+ points. Note: the axis tooltip/axisPointer (hovering directly over the chart plot area) is not affected — it continues to track the cursor and display values correctly regardless of point count. Only the legend-hover-triggered series emphasis/highlight is impacted. This appears to be caused by echarts rendering one SVG symbol node (e.g. <circle>) per data point when showSymbol is not explicitly disabled. At larger point counts, re-styling/re-rendering the emphasized series (triggered by legend hover) on that many live SVG DOM nodes becomes too expensive to complete responsively. ### Expected Behavior Hovering the legend name should highlight/emphasize the corresponding series responsively, regardless of point count. Actual behavior: At 2,000 points: hovering the legend name immediately highlights/emphasizes the series line. At 3,000+ points (tested up to 20,000): hovering the legend name produces no visible highlight, or highlighting is significantly delayed/unresponsive. Chart-body hover (tooltip/axis-pointer) remains fully functional at all point counts tested. ### Environment ```markdown - OS: MAC - Browser: Chrome ``` ### Any additional comments? Workaround found: Setting showSymbol: false (and optionally sampling: 'lttb') on the series restores legend-hover responsiveness at high point counts, since it avoids rendering one symbol node per data point. Suggested fix / ask: Improve default performance of legend hoverLink emphasis re-render at this point-count range without requiring showSymbol: false, or document this threshold in performance guidance for line series with legend interaction. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
