victory icon indicating copy to clipboard operation
victory copied to clipboard

VictoryVoronoiContainer labels behave differently when used with multiple VictoryBars and voronoiDimension

Open jasonpan12 opened this issue 10 months ago • 0 comments

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 Screenshot 2023-10-17 at 4 04 38 PM Screenshot 2023-10-17 at 4 04 43 PM

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.

jasonpan12 avatar Oct 17 '23 20:10 jasonpan12