VictoryVoronoiContainer adds the ability to associate a mouse position with the data point(s) closest to it. When this container is added to a chart, changes in mouse position will add the active prop to data and label components closest to the current mouse position. The closeness of data points to a given position is determined by calculating a voronoi diagram based on the data of every child VictoryVoronoiContainer renders. This container is useful for adding hover interactions, like tooltips, to small data points, or charts with dense or overlapping data. See this example to learn how to use VictoryVoronoiContainer with tooltips.

VictoryVoronoiContainer may be used with any Victory component that works with an x-y coordinate system, and should be added as the containerComponent of the top-level component. However, the component that uses it must be standalone (standalone={true}), which is the default for all top-level Victory components.

<VictoryChart domainPadding={{ y: 10 }}
  containerComponent={
    <VictoryVoronoiContainer
      labels={({ datum }) => `${round(datum.x, 2)}, ${round(datum.y, 2)}`}
    />
  }
>
  <VictoryLine
    y={(datum) => Math.sin(2 * Math.PI * datum.x)}
  />
</VictoryChart>

VictoryVoronoiContainer uses a superset of props used by VictoryContainer. All props are optional.

type: boolean

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.

default: activateData={true}

type: boolean

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.

default: activateLabels={true}

type: boolean

When the disable prop is set to true, VictoryVoronoiContainer events will not fire.

type: function

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}

type: element

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.

default: labelComponent={<VictoryTooltip centerOffset={{ x: 5 }} />}

<VictoryChart domain={{ y: [0, 6] }}
  containerComponent={
    <VictoryVoronoiContainer
      labels={() => "Long, verbose labels"}
      labelComponent={
        <VictoryTooltip  dy={-7} constrainToVisibleArea />
      }
    />
  }
>
  <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>

type: boolean

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}`}
    />
  }
>
  <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>

type: function

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)}

type: function

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)}

type: number

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.

example: radius={25}

type: array[string]

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}`}
    />
  }
>
  <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>

type: "x" || "y"

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}`}
    />
  }
>
  <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>

type: number

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.

example: voronoiPadding={5}