FormidableLabs / FormidableLabs/victory

Supporting keyboard interactivity with VictoryVoronoiContainer

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

Description

### Is there an existing issue for this?

- [X] I have searched the existing issues

### Code of Conduct

- [X] I agree to follow this project's Code of Conduct

### Question

I am using VictoryVoronoiContainer to display tooltips for a stacked area chart. The labels are defined on the container component, using a VictoryTooltip as the labelComponent. I'd also like to be able to activate the tooltips via the keyboard, so I've added a transparent stacked VictoryScatter with a tabindex={0} on each of the points.

I can reliably capture onFocus/onBlur events on the scatter to know which data point was focused via the keyboard, but I can't figure out how to activate the labels on the container. I'm storing the focused point in the component's local state, which I've tried passing as a prop to to the tooltip, but the tooltip never seems aware of it, and I can't find a way to programmatically activate it with the event. I've tried setting the event both on the scatters themselves and on the chart parent.

How can I activate a voronoi tooltip from a keyboard event? Is this possible?

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.