apache / apache/echarts

[Bug] Legend click not responding when setOption is called at high frequency (≥30fps)

Open
#21,566 2 comments 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

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](`dynamic-data2`) example, change the update interval to 60fps:

```js
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:
1. Open the above config in ECharts playground
2. Try clicking the legend item "Fake Data"
3. 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

```markdown
- OS: macOS 26.3.1、Windows 10
- Browser: Chrome Version 146.0.7680.165 (Official Build) (arm64)
- Framework: Vue3、Chrome officel example
```

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.