FormidableLabs / FormidableLabs/victory

VictoryGroup fails to pass shared events to children

Open
#2,232 2 comments 0 reactions 0 assignees View on GitHub
Issue: Accepted Type: Bug :bug:
Dominant language
TypeScript
Stars
11.2k
Forks
536
PR merge metrics
No merged PRs in 30d

Description

# Bug Reports

### Checklist

- [x] I have read through the [FAQ](https://formidable.com/open-source/victory/docs/faq) and [Guides](https://formidable.com/open-source/victory/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 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

![chrome-capture-good](https://user-images.githubusercontent.com/17481322/167757795-0b24a8a0-8bc2-40de-9146-da977cc806cd.gif)

**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

![chrome-capture-bad](https://user-images.githubusercontent.com/17481322/167757823-d52dd3b3-7bc0-459f-9c02-75a555bb7398.gif)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.