Legend hoverLink emphasis highlighting becomes unresponsive on line series above ~2,000-3,000 points (SVG renderer)
Version
6.0.0
Link to Minimal Reproduction
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.
Source: apache/echarts