Legend hoverLink emphasis highlighting becomes unresponsive on line series above ~2,000-3,000 points (SVG renderer)

[ShanteshSindgi]

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. ) 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

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

[helgasoft]

set hoverLayerThreshold = your data count + 45. Works with SVG and Canvas renderer.
  Demo
📌 please close issue if problem solved.