createContainer makes a container component with multiple behaviors. It allows you to effectively combine any two of the following containers: VictoryBrushContainer, VictoryCursorContainer, VictorySelectionContainer, VictoryVoronoiContainer, or VictoryZoomContainer.

const VictoryZoomVoronoiContainer = createContainer("zoom", "voronoi");

The function takes two behavior arguments as strings:

createContainer(behaviorA, behaviorB)

Each behavior must be one of the following strings: "brush", "cursor", "selection", "voronoi", and "zoom". The resulting container uses the events from both behaviors. For example, if both behaviors use the click event (like zoom and selection) the combined container will trigger both behaviors' events on each click.

Note: Order of the behaviors matters in a few cases. It is recommended to use "zoom" before any other behaviors: for example, createContainer("zoom", "voronoi") instead of createContainer("voronoi", "zoom").

The following example creates a custom container that combines VictoryVoronoiContainer and VictoryZoomContainer. Hovering over the chart will use Voronoi to highlight data points, while scrolling and dragging will zoom and pan.

const VictoryZoomVoronoiContainer = createContainer("zoom", "voronoi");
const data = range(100).map((x) => ({x, y: 100 + x + random(10)}));

const App = () => (
  <VictoryChart
    containerComponent={
      <VictoryZoomVoronoiContainer
        labels={({ datum }) => `${datum.x}, ${datum.y}`}
      />
    }>
    <VictoryScatter data={data} />
  </VictoryChart>
);

render(<App/>);