Mouse events don't work as expected on grouped overlapping VictoryLine components #2468
Labels
Note: Good first issue 🤩
Good issue for new contributors
Type: Bug 🐛
Oh no! A bug or unintentional behavior
Type: Enhancement ✏️
An enhancement or feature proposal that will be addressed after the next release
Is your feature request related to a problem? Please describe.
When multiple
VictoryLine
components are rendered together, attaching events to them results in issues when the lines overlap - any overlapping area is only interactable on the topmost component. This is due to the fill triggering the event as if it were an area chart.Describe the solution you'd like
Default behavior for
VictoryLine
should allow for event interaction when charts overlap. By default, events should not be triggered by the fill in addition to the line.Describe alternatives you've considered
I worked around this by setting
pointerEvents: 'none'
on my line graphs and adding a second, invisible graph on top to attach the events to with astroke: 'transparent'
,fill: 'none'
, andpointerEvents: 'stroke'
(this could also be done by just settingfill: 'none'
andpointerEvents: 'stroke'
, but I wanted to make the interactable stroke area thicker for ease of interactivity).Additional context
As an example, in my use case, this is a spider chart that I wanted to change style on hovering a given line.
When they overlapped, events attached to the data elements would not register on lines rendered behind other lines and instead would only react to pointer events within the fill of the top path.
After implementing workaround, mouseover events worked on
VictoryLine
s that were behind otherVictoryLine
s.Relevant parts of code in my implementation:
The text was updated successfully, but these errors were encountered: