Open dlabrecq opened 2 years ago
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.
Bug Reports
Checklist
[x] I have read through the FAQ and Guides
[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 ofVictoryGroup
. 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 providestyle
properties for myVictoryArea
andVictoryScatter
components when they're placed insideVictoryGroup
. Thus, I cannot apply the component'sstyle
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.jsExample 2 This code sandbox does NOT work with
VictoryGroup
. In this scenario, events don't provide componentstyle
properties. https://codesandbox.io/s/events-not-working-d59wkm