apache / apache/echarts

[Bug] Hover on legend item for custom series with array focus highlights first item in other series

Open
#20,926 3 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

5.6.0

### Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?code=MYewdgzgLgBAJgQygmBeGBBATlhBPAOgDMsQBbACgG8AbAUzAHMoALALhgCYAGAXwEoCZBAAcKFAPoAaGAEt-aAHwxqAKBgwAHh1lT1MBDpgBqGAEY9GgEYceMALSzVA_gG5VqogFcwwKLPAYLAY4OiwASSg6ShEEXDIIGVF5GCp9UEhYTQA3NAMRWQJshBovOgpY-IgCBlBQgk0AbW4AXX508GgYPFz0ZKKSsoq4hASa3xB6vGa29w0MrsbNKTwWvP7QECw4CiXsmR7Zjw1gqC8sMFT9DSg8EToOAHJgWSxgekfLDS0vjTxfmBEEDALwQDiNSqjaqIZDhMChTQtAEQFiiB5Xb7fLAcAAc1xgvGRt3oHDSmI0RFkNBoHH62VkEC8JQozxANC2j3amN4-h5PNUIBE_kC6DJ8CQCAgdCgpPxEBA52A6JhCC-hP0mgwmgZssxt3uT2KpToj15XzwWp1qXVGnojBCuu-KvBjwwnxgjwAQo8Wmb9FKsLI6GCYI18WLMWBRujXZ98RpapN0RHydoPZo4-TvngnghTVmbeT9TGQdByJnycF4WFItEAfM2VsnlZjfnvoWNCmNFGyDHvfWYInQo6s2nHhmB39m23uQPi09S1BywOq6EIlEyAPQOzsR7gnAZwT9EjnK4gA

### Steps to Reproduce

Create a chart with two custom series. There series can return any shape, but they must use `focus` to return an array containing the current `params.dataIndex`. This allows hovering on any item to focus on all items with that data index in all defined series.

```tsx
function renderItem(params, api) {
const xv = api.value(params.encode.x[0])
const yv = api.value(params.encode.y[0]);
const [x,y] = api.coord([xv, yv]);

return {
type: 'circle',
x,
y,
focus: [params.dataIndex],
shape: {
r: 8
},
style: {
fill: api.visual('color')
}
}
}

chart.setOption({
// ...
series: [
{
name: 'A',
encode: {
x: 'x',
y: 'a'
},
type: 'custom',
renderItem,
color: 'blue'
},
{
name: 'B',
encode: {
x: 'x',
y: 'b'
},
type: 'custom',
renderItem,
color: 'red'
}
],
});
```

### Current Behavior

As desired, hovering over items in the series correctly highlights all the items at that data index:

https://github.com/user-attachments/assets/cd520a92-d989-4eaf-ac9c-eff51b0bd6fc

However, when you now hover over a series' item in the legend, the first item of the other series is incorrectly focussed as well as the series itself:

https://github.com/user-attachments/assets/15df03d8-48cb-4aa3-8e79-256b02cfeed7

### Expected Behavior

When hovering the legend item, only the items belonging to that series should be focussed.

### Environment

```markdown
- OS: macOS
- Browser: Chrome 135.0.7049.85
- Framework: N/A
```

### Any additional comments?

_No response_

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.