[Feature] Allow separate style customization if mark highlighted from legend
- 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
Assessment
This issue has not been assessed yet.