victory
victory copied to clipboard
VictoryVoronoiContainer labels behave differently when used with multiple VictoryBars and voronoiDimension
Describe the bug Observed Behavior:
- When using a VictoryVoronoiContainer with a label, voronoiDimension = "x", and child VictoryBar components, the label for each bar follows the mouse when there are multiple bars for a given X position but not a single bar for a given X position.
In other words, when only a single VictoryBar is rendered for an X position on screen, voronoiDimension on VictoryVoronoiContainer does not seem to take effect. To adjust the expected behavior as described in the docs, all data points matching a particular x mouse position
are NOT activated regardless of y value
.
https://formidable.com/open-source/victory/docs/victory-voronoi-container/#voronoidimension
Observed Behavior Con't:
- If you remove one of the VictoryBar components from the example, then all bars displayed will show the behavior where the label does not follow the mouse.
Victory version Which npm version are you using? N/A - just using the online docs
Code Sandbox link Please include a code sandbox link or a similar reproduction if possible. I can do this, but thought it might be easier to just use the online docs for Victory
To Reproduce Steps to reproduce the behavior: Start at https://formidable.com/open-source/victory/docs/victory-voronoi-container/#voronoidimension Replace the default source with
<VictoryChart domain={{ y: [0, 6] }}
containerComponent={
<VictoryVoronoiContainer
voronoiDimension="x"
labels={({ datum }) => `y: ${datum.y}`}
/>
}
>
<VictoryBar
style={{ data: { fill: "red" }, labels: { fill: "red" } }}
data={[
{ x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }
]}
/>
<VictoryBar
data={[
{ x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }
]}
/>
</VictoryChart>
This code changes the default example from VictoryScatters to VictoryBars.
Expected behavior Expected (or assumed expected) Behavior:
- When using voronoiDimension, the tooltip should follow the mouse along the VictoryBar even when there is only a single bar per X position
Screenshots
https://github.com/FormidableLabs/victory/assets/18650238/33c17c9d-4bd6-4b6a-a09a-a12eab31977a ^ Video showing issue
Desktop (please complete the following information):
- OS: Mac OS Ventura 13.5.2
- Browser: Chrome
- Version 118.0.5993.70 (Official Build) (x86_64)
Smartphone (please complete the following information): n/a
Additional context In my actual implementation of Victory, I am able to circumvent this issue by returning individual VictoryBar with one data point each with a map on my data array, e.g.
tableData.map((datum) => (<VictoryBar
data={[
{
x: datum.X,
y: datum.Y,
},
]} />...`
Rather than having a single (explicit) VictoryBar component with a data prop that has >1 item in it.
However...
* I am unable to reproduce my workaround in the online editor
* The unexpected behavior still occurs when my tableData only has one item in it.