victory-create-container

createContainer

victory-create-container@^30.0.0 exports createContainer, combineContainerMixins and makeCreateContainerFunction

View these docs at https://formidable.com/open-source/victory/docs/create-container to see live examples.

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");

Arguments

The function takes two behavior arguments as strings:

createContainer(behaviorA, behaviorB)

Behavior

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").

Example

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={(d) => `${d.x}, ${d.y}`}
      />
    }>
    <VictoryScatter data={data} />
  </VictoryChart>
);

ReactDOM.render(<App/>, mountNode);

Changelog

31.0.0 (2018-11-10)

• #1177 Adds support for controlling radius, innerRadius, cornerRadius, padAngle, sliceStartAngle and sliceEndAngle for each individual slice of a pie:

Details: The Slice primitive used by VictoryPie now takes radius, cornerRadius, innerRadius, padAngle, sliceStartAngle and sliceEndAngle props. Each of these props may be given as number or a function of datum and active. padAngle, radius, cornerRadius and innerRadius will be passed down from props on VictoryBar, but sliceStartAngle and sliceEndAngle must be defined directly on the Slice instance, These values should be given in degrees. To make these values easier to use as functional props, startAngle, endAngle, and padAngle (in degrees) are added to each datum passed into Slice. (If your data already has these properties they will not be overridden)

Breaking Changes The Slice primitive will still take a pathFunction prop, but this prop will no longer be provided by VictoryPie. This will not be a breaking change for most users. This will only affect users who were wrapping the Slice component and making use of the pathFunction prop provided by VictoryPie Users who were providing their own pathFunction prop to Slice should not be effected.