Voronoi Container in VictoryGroup doesn't work, otherwise works fine

[clemwo]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Victory version

37.0.2

Code Sandbox link

https://codesandbox.io/p/sandbox/victory-v35-0-3-works-forked-qzs33q?file=%2Fsrc%2FApp.js

Bug report

Hi, thanks for the great work.

I would like to have a voronoi container around specific line graphs in my chart component. The voronoi container should only react to that and not other line graphs in my chart.
After doing some research I figured that this case is perfect for the VictoryGroup.
My idea was simply grouping the line graphs that should be handled by the VoronoiContainer in a VictoryGroup.

However that doesn't work and I can't figure out why.

Steps to reproduce

Please check the sandbox [here](https://codesandbox.io/p/sandbox/victory-v35-0-3-works-forked-qzs33q?file=%2Fsrc%2FApp.js)

The code looks like this:


<div className="App">
      <VictoryChart>
        <VictoryAxis />
        <VictoryAxis dependentAxis />
        {/* If I put the VictoryVoronoiContainer in the VictoryChart component a few lines above everything works fine */}
        <VictoryGroup
          containerComponent={
            <VictoryVoronoiContainer labels={({ datum }) => getLabel(datum)} />
          }
        >
          <VictoryLine data={secondLine} style={{ data: { stroke: "red" } }} />
          <VictoryLine data={firstLine} style={{ data: { stroke: "blue" } }} />
        </VictoryGroup>
        {/* I dont want this line to be included in the voronoi container */}
        <VictoryLine x={() => 5} style={{ data: { strokeWidth: 0.5 } }} />
      </VictoryChart>
    </div>

### Expected behavior

```markdown
As specified in the docs, the voronoi should work as a container element for VictoryGroup as described in the docs [here](https://commerce.nearform.com/open-source/victory/docs/victory-group#containercomponent)

Actual behavior

No label is being shown and the events don't seem to be triggered.

Environment

- Device: Macbook Air M2
- OS: MacOS Ventura 13.0
- Node: 18.16.1
- Browser: Firefox

[acharyakavita]

Hi @clemwo ,
The voronoiBlacklist prop is used to specify a list of components to ignore when calculating a shared voronoi diagram.
Here is the link for the same https://commerce.nearform.com/open-source/victory/docs/victory-voronoi-container#voronoiblacklist .

Using this, the below code example works in your use case.

<VictoryChart
        containerComponent={
          <VictoryVoronoiContainer
            labels={({ datum }) => getLabel(datum)}
            voronoiBlacklist={["ignore"]}
          />
        }
      >
        <VictoryAxis />
        <VictoryAxis dependentAxis />
        <VictoryGroup>
          <VictoryLine data={secondLine} style={{ data: { stroke: "red" } }} />
          <VictoryLine data={firstLine} style={{ data: { stroke: "blue" } }} />
        </VictoryGroup>
        <VictoryLine
          name="ignore"
          x={() => 5}
          style={{ data: { strokeWidth: 0.5 } }}
        />
      </VictoryChart>

[acharyakavita]

@clemwo
Explaination to the use case of using VictoryVoronoiContainer as a prop in VictoryGroup :

As per https://commerce.nearform.com/open-source/victory/docs/victory-voronoi-container to use containerComponent prop, the React component has to be standalone or top level element. In the above code example, that I shared, VictoryChart is a standalone element and containerComponent can be used.

Below is a code example for Victory Group using containerComponent.

     <VictoryGroup
              containerComponent={
                <VictoryVoronoiContainer 
                 labels={({ datum }) => datum.x} />
              }
            >
                <VictoryLine 
                data={[
                { x: 1, y: 3 },
                { x: 2, y: 4 },
                { x: 3, y: 3 },
                { x: 4, y: 1 },
                { x: 5, y: 2 },
                { x: 6, y: 3 },
                { x: 7, y: 3 },
              ]} 
                style={{ data: { stroke: "red" } }} />
                <VictoryLine 
                data={[
                { x: 1, y: 2 },
                { x: 2, y: 4.32332 },
                { x: 3, y: 3.87543 },
                { x: 4, y: 1.1251 },
                { x: 5, y: 2.123241 },
                { x: 6, y: 3.5231 },
                { x: 7, y: 3 },
                ]} style={{ data: { stroke: "blue" } }} />
            </VictoryGroup>

VictoryGroup doesn't have axes here and it won't work for your code scenario . But it works when used as standalone component. Hope this resolves your issue. Please re-open the ticket if the response is unsatisfactory.