VictoryVoronoiContainer
Adds the ability to associate a mouse position with the data point(s) closest to it.
For examples of VictoryVoronoiContainer in action, visit the containers guide.
Inherited Props
Component Props
activateData
When the activateData prop is set to true, the active prop will be set to true on all data components within a voronoi area. When this prop is set to false, the onActivated and onDeactivated callbacks will still fire, but no mutations to data components will occur via Victory's event system.
activateLabels
When the activateLabels prop is set to true, the active prop will be set to true on all labels corresponding to points within a voronoi area. When this prop is set to false, the onActivated and onDeactivated callbacks will still fire, but no mutations to label components will occur via Victory's event system. Labels defined directly on VictoryVoronoiContainer via the labels prop will still appear when this prop is set to false.
disable
When the disable prop is set to true, VictoryVoronoiContainer events will not fire.
labels
When a labels prop is provided to VictoryVoronoiContainer it will render a label component
rather than activating labels on the child components it renders. This is useful for creating multi-
point tooltips. This prop should be given as a function which will be called once for each active point. The labels function will be called with the props that correspond to the active label.
example: labels={({ datum }) => "y: " + datum.y}
labelComponent
The labelComponent prop specified the component that will be rendered when labels are defined
on VictoryVoronoiContainer. If the labels prop is omitted, no label component will be rendered.
<VictoryChart domain={{ y: [0, 6] }} containerComponent={ <VictoryVoronoiContainer labels={() => "Long, verbose labels" } labelComponent={ <VictoryTooltip dy={-7} constrainToVisibleArea /> } /> } theme={VictoryTheme.clean} > <VictoryScatter style={{ data: { fill: "red" }, labels: { fill: "red" }, }} data={[ { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }, ]} /> <VictoryScatter data={[ { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }, ]} /> </VictoryChart>
mouseFollowTooltips
When the mouseFollowTooltip prop is set on VictoryVoronoiContainer, The position of the center of the tooltip follows the position of the mouse.
<VictoryChart domain={{ y: [0, 6] }} containerComponent={ <VictoryVoronoiContainer mouseFollowTooltips voronoiDimension="x" labels={({ datum }) => `y: ${datum.y}` } /> } theme={VictoryTheme.clean} > <VictoryScatter style={{ data: { fill: "red" }, labels: { fill: "red" }, }} data={[ { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }, ]} /> <VictoryScatter data={[ { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }, ]} /> </VictoryChart>
onActivated
The onActivated prop accepts a function to be called whenever new data points are activated.
The function is called with the parameters points (an array of active data objects) and props (the props used by VictoryVoronoiContainer).
example: onActivated={(points, props) => filterList(points, props)}
onDeactivated
The onDeactivated prop accepts a function to be called whenever points are deactivated.
The function is called with the parameters points (an array of the newly-deactivated data objects) and props (the props used by VictoryVoronoiContainer).
example: onDeactivated={(points, props) => removeFromList(points, props)}
radius
When the radius prop is set, the voronoi areas associated with each data point will be no larger
than the given radius. This prop should be given as a number.
voronoiBlacklist
The voronoiBlacklist prop is used to specify a list of components to ignore when calculating a shared voronoi diagram. Components with a name prop matching an element in the voronoiBlacklist array will be ignored by VictoryVoronoiContainer. Ignored components will never be flagged as active, and will not contribute data to shared tooltips or labels.
example: voronoiBlacklist={["redPoints"]}
<VictoryChart domain={{ y: [0, 6] }} containerComponent={ <VictoryVoronoiContainer voronoiBlacklist={["redPoints"]} labels={({ datum }) => `y: ${datum.y}` } /> } theme={VictoryTheme.clean} > <VictoryScatter name="redPoints" style={{ data: { fill: "red" }, labels: { fill: "red" }, }} data={[ { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }, ]} /> <VictoryScatter data={[ { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }, ]} /> </VictoryChart>
voronoiDimension
When the voronoiDimension prop is set, voronoi selection will only take the given dimension into account.
For example, when dimension is set to "x", all data points matching a particular x mouse position
will be activated regardless of y value. When this prop is not given, voronoi selection is
determined by both x and y values.
example: voronoiDimension="x"
<VictoryChart domain={{ y: [0, 6] }} containerComponent={ <VictoryVoronoiContainer voronoiDimension="x" labels={({ datum }) => `y: ${datum.y}` } /> } theme={VictoryTheme.clean} > <VictoryScatter style={{ data: { fill: "red" }, labels: { fill: "red" }, }} data={[ { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }, ]} /> <VictoryScatter data={[ { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }, ]} /> </VictoryChart>
voronoiPadding
When the voronoiPadding prop is given, the area of the chart that will trigger voronoi events is
reduced by the given padding on every side. By default, no padding is applied, and the entire range
of a given chart may trigger voronoi events. This prop should be given as a number.