[Feature] Ability to hide overlap in value labels in emphasis state

[hughess]

Version

5.4.3

Link to Minimal Reproduction

https://jsfiddle.net/s6mr0g8c/1/

Steps to Reproduce

1. Create a multi-series line chart with many points
2. Set labelLayout to hideOverlap
3. Hover over one of the series names in the legend

Current Behavior

On hovering the legend, labels for all points on the line appear, without any control for overlap

Expected Behavior

Labels should stay the same as they are outside of emphasis state (or hideOverlap should apply in emphasis state)

Environment

N/A

Any additional comments?

No response

[helgasoft]

the animated image shown does not correspond to the Minimal Reproduction code.
To fix the code, use emphasis: {disabled: true} on both series.
Please close issue if problem solved.

[hughess]

I don’t want to disable emphasis because id still like to be able to hover over the individual lines and have them be highlighted. I’d also like the line to be highlighted when you hover over the legend item - I just don’t want the labels to show up like that

[helgasoft]

Your title is correct, labelLayout.hideOverlap does not apply to emphasis state. It could be a new [Feature] to implement.

Workaround to improve UI since both lines overlap:
second line: labelLayout: { hideOverlap: true, dy:22 },
both lines: emphasis: {focus:'self', label: {show: false}}

[hughess]

Ok thanks. Let me know if I should change the issue title to request the feature - it would be helpful to have.

Unfortunately I'm building this into a library, so it needs to be useable for n lines that I won't know about in advance

[helgasoft]

yes, I think [Feature] title is more appropriate since no promises are broken.

[gaofanni]

axisPointer.triggerEmphasis=false can solve this problem

[helgasoft]

@gaofanni, axisPointer.triggerEmphasis exists already in the code but does not help.
The problem shows while hovering over the legend items.