Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mouse events don't work as expected on grouped overlapping VictoryLine components #2468

Closed
sparklerfish opened this issue Sep 20, 2022 · 0 comments · Fixed by #2498
Closed
Assignees
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

Comments

@sparklerfish
Copy link

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 a stroke: 'transparent', fill: 'none', and pointerEvents: 'stroke' (this could also be done by just setting fill: 'none' and pointerEvents: '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.
Mouseover event failing to capture elements behind

After implementing workaround, mouseover events worked on VictoryLines that were behind other VictoryLines.
Implementation with invisible stroke

Relevant parts of code in my implementation:

<VictoryGroup
    events={[{
        childName: allLines,
        target: 'data',
        eventHandlers: {
            onMouseOver: handleMouseOver,
            onMouseOut: handleMouseOut,
        },
    }]}
>
    {spiderData.map(({ data, color, key }) => (
        <VictoryGroup key={key} data={data}>
            <VictoryLine
                name={`visual-line-${key}`}
                style={{
                    data: {
                        stroke: color,
                        strokeWidth: 1,
                        pointerEvents: 'none',
                    },
                }}
            />
            <VictoryLine
                name={`line-${key}`}
                style={{
                    data: {
                        stroke: 'transparent',
                        strokeWidth: 7,
                        pointerEvents: 'stroke',
                        fill: 'none',
                    },
                }}
            />
        </VictoryGroup>
    ))}
</VictoryGroup>
@scottrippey scottrippey added Type: Bug 🐛 Oh no! A bug or unintentional behavior Type: Enhancement ✏️ An enhancement or feature proposal that will be addressed after the next release Note: Good first issue 🤩 Good issue for new contributors labels Dec 7, 2022
@gwynethrose gwynethrose self-assigned this Dec 8, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants