apache / apache/echarts

[Feature] Allow separate style customization if mark highlighted from legend

Open
#20,626 3 comments 0 reactions 0 assignees View on GitHub
en new-feature pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?

### Use case

I'd like to visually distinguish direct interactions with marks from legend interactions.
When hovering over a Pie slice I'd like to apply emphasis styles, but when highlighting a Pie slice through the legend I'd like to apply different styles.

### Example Experience

https://github.com/user-attachments/assets/64410e67-f6e8-4c54-b51b-946c2edc058d

### Current Workaround
- customize styles through mutating the graphics elements when legend items are hovered
- rely on emphasis state for direct interactions

```js
// for legend highlight, iterate through each graphic element and apply opacity as needed
const data = series.getData(); // from chart model
data.eachItemGraphicEl((graphic, index) => {
graphic.setStyle({
opacity:
dataIndexes.includes(index)
? HIGHLIGHT_OPACITY
: HIGHLIGHT_OPACITY_MUTED,
});
});
```

### Open Questions

Is there a better way to achieve this without customizing on the renderer level?

### What does the proposed API look like?

This may not be a good idea so open to alternative approaches:

- Extend the highlight action payload support applying custom styles when dispatching a highlight action

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.