Repository navigation
[Bug] Legend click not responding when setOption is called at high frequency (≥30fps) #21566
Description
Version
6.0.0
Link to Minimal Reproduction
https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2
Steps to Reproduce
Using the official https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2 example, change the update interval to 60fps:
setInterval(function () {
for (var i = 0; i < 5; i++) {
data.shift();
data.push(randomData());
}
myChart.setOption({
series: [{ data: data }]
});
}, 1000 / 60); // <-- changed from 1000 to 1000/60
// Add a legend:
option = {
legend: { data: ['Fake Data'] },
// ... rest unchanged
};Steps to reproduce:
- Open the above config in ECharts playground
- Try clicking the legend item "Fake Data"
- Click multiple times — the legend rarely or never responds
Current Behavior
When setOption is called at high frequency (≥30fps, e.g. real-time WebSocket data),
clicking legend items becomes unreliable or completely unresponsive.
Expected Behavior
Legend items should be clickable regardless of how frequently setOption is called.
Environment
- OS: macOS 26.3.1、Windows 10
- Browser: Chrome Version 146.0.7680.165 (Official Build) (arm64)
- Framework: Vue3、Chrome officel exampleAny additional comments?
Root Cause (suspected)
zrender's click detection saves _downEl on mousedown and compares it to the
element found at mouseup. When setOption triggers a scene graph update between
mousedown and mouseup, the legend elements may be recreated or marked dirty,
causing the reference comparison to fail and the click event to never fire.
This does not happen with mousemove (cursor change works correctly), only with
the mousedown → mouseup sequence.
Temporary solution
Replace ECharts' built-in legend with HTML elements positioned over the canvas,
and use dispatchAction({ type: 'legendToggleSelect', name }) to control
series visibility programmatically.
Activity
waterWang commentedon Aug 9, 2026
The root cause is in zrender's Handler.ts click detection, which compares element references (_downEl !== _downEl). When setOption recreates elements between mousedown and mouseup, the reference comparison always fails.
I've submitted a fix in zrender PR #1165: ecomfe/zrender#1165
The fix adds a check using the existing pattern (already used in the mousemove handler) to detect when was removed from zrender due to element recreation. If the element was removed, the click is allowed to proceed to the new element at the same position.
After the zrender fix is merged, echarts needs to update its zrender dependency to pick up the fix.
waterWang commentedon Aug 9, 2026
The root cause is in zrender's
Handler.tsclick detection, which compares element references (_downEl !== _upEl). WhensetOptionrecreates elements between mousedown and mouseup, the reference comparison always fails and the click never fires.I've submitted a fix in zrender PR #1165: ecomfe/zrender#1165
The fix adds a check using the existing
__zrpattern (already used in themousemovehandler) to detect when_downElwas removed from zrender due to element recreation. If the element was removed, the click is allowed to proceed to the new element at the same position.After the zrender fix is merged, echarts needs to update its zrender dependency to pick up the fix.