victory
victory copied to clipboard
VictoryGroup fails to pass shared events to children
Bug Reports
Checklist
-
[x] I am using the latest version of Victory
-
[x] I've searched open issues to make sure I'm not opening a duplicate issue
The Problem
VictoryGroup does not appear to pass shared events from its parent to its children. At least, events do not provide style
props for children of VictoryGroup
. I recall this worked at one point, but now it seems that events only work as expected with direct children?
Reproduction
I created an interactive legend that uses events. When hovering over legend symbols and labels, we want to highlight the data associated with that particular legend item. That is, all other data (not associated with that legend item) is muted by applying an opacity
style.
Events are located on VictoryChart
because the legend is a direct child. However, the events fail to provide style
properties for my VictoryArea
and VictoryScatter
components when they're placed inside VictoryGroup
. Thus, I cannot apply the component's style
properly to achieve the desired functionality.
Example 1
This code sandbox shows what is expected visually, but we're not able to use VictoryGroup
here.
https://codesandbox.io/s/events-working-h67i5x?file=/src/App.js
Example 2
This code sandbox does NOT work with VictoryGroup
. In this scenario, events don't provide component style
properties.
https://codesandbox.io/s/events-not-working-d59wkm
I noticed that you're passing an xstyle
prop into VictoryArea
in your non-working example. Renaming xstyle
to style
seems to work, as far as I can tell. Here's a forked Sandbox with the change: https://codesandbox.io/s/events-not-working-forked-k3qzy4?file=/src/App.js
I had renamed style
as xstyle
to disable the property. I've cleaned that up - sorry for the confusion.
I was trying to show that the event does not inherit the colorScale
and style
props from VictoryGroup
. Instead the event providing styles like fillOpacity
and color; for example, we end up with solid gray.