Containers
Defaults
Victory containers have default width, height, and padding props defined in the default theme.
Victory renders components into responsive svg containers by default using VictoryContainer. VictoryContainer is a responsive container with a viewBox attribute set to viewBox={"0 0 width, height"} and styles width: "100%" height: "auto" in addition to any styles provided via props. Because Victory renders responsive containers, the width and height props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into.
Fixed Size Containers
Responsive containers are not appropriate for every application, so Victory provides a couple of options for rendering static containers. The easiest way to render a static container rather than a responsive one is by setting the responsive prop to false directly on the containerComponent instance.
<VictoryChart height={200} width={300} containerComponent={ <VictoryContainer responsive={false} /> } theme={VictoryTheme.clean} > <VictoryLine y={(data) => Math.sin(2 * Math.PI * data.x) } /> </VictoryChart>
Render Order
Victory renders svg elements, so there is no concept of z-index. Instead the render order of components determines which elements will appear above others. Changing the order of rendered components can significantly alter the appearance of a chart. Compare the following charts.
The difference is the order of the children in VictoryChart.
const sampleFn = (data) => Math.sin(2 * Math.PI * data.x); const scatterStyle = { data: { fill: "red" }, }; function App() { return ( <> <VictoryChart theme={VictoryTheme.clean} > <VictoryScatter y={sampleFn} samples={25} size={5} style={scatterStyle} /> <VictoryLine y={sampleFn} /> </VictoryChart> <VictoryChart theme={VictoryTheme.clean} > <VictoryLine y={sampleFn} /> <VictoryScatter y={sampleFn} samples={25} size={5} style={scatterStyle} /> </VictoryChart> </> ); } render(<App />);
Render on Top
Some components should always render above others. Use VictoryPortal to render components in a top level container so that they appear above all other elements. VictoryTooltip uses VictoryPortal, by default, but any component may be wrapped in VictoryPortal to alter its rendering.
VictoryPortal only works with components that are rendered within a Victory Container component.
<VictoryChart domainPadding={40} theme={VictoryTheme.clean} > <VictoryStack colorScale="warm" style={{ data: { width: 30 }, labels: { padding: -20 }, }} labelComponent={ <VictoryPortal> <VictoryLabel /> </VictoryPortal> } > <VictoryBar data={[ { x: 1, y: 3, label: "C" }, { x: 2, y: 4, label: "C" }, { x: 3, y: 2, label: "C" }, ]} /> <VictoryBar data={[ { x: 1, y: 3, label: "B" }, { x: 2, y: 4, label: "B" }, { x: 3, y: 2, label: "B" }, ]} /> <VictoryBar data={[ { x: 1, y: 3, label: "A" }, { x: 2, y: 4, label: "A" }, { x: 3, y: 2, label: "A" }, ]} /> </VictoryStack> <VictoryAxis /> </VictoryChart>
Basic Container Types
Victory renders charts into top-level container components. The most commonly used container is VictoryChart.
Containers are responsible for rendering children into a responsive svg, and providing a portal component for rendering tooltips, or any other elements that should be rendered above everything else.
VictoryContainer
VictoryContainer provides a top-level <svg> element for other Victory components to render within. Most containers extend VictoryContainer to add extra functionality.
See the full API here.
VictoryChart
VictoryChart is a container that renders a set of children on a set of Cartesian or polar axes. VictoryChart reconciles the domain for all its children, controls the layout of the chart, and coordinates animations and shared events. If no children are provided, VictoryChart will render a set of empty default axes.
See the full API here.
Advanced Container Types
VictoryGroup
VictoryGroup is a container that renders a given set of children with shared props. This is useful for creating a group of components that share styles or data, or rendering multiple charts without axes.
See the full API here.
VictoryBrushContainer
VictoryBrushContainer adds the ability to highlight a region of a chart, and interact with
highlighted regions, either by moving the region, expanding the region, or selecting a new region.
See the Brush Selection guide.
VictoryCursorContainer
VictoryCursorContainer adds a cursor to a chart to inspect coordinates. The cursor can either be a 2-dimensional crosshair, or a 1-dimensional line. The cursor moves with the mouse (or on touch on mobile devices) along the visible domain of the chart.
See the Cursor Tooltips guide.
VictorySelectionContainer
VictorySelectionContainer is used to enable selecting data points within a highlighted region.
Clicking and dragging will select an x-y region, and add the active prop to any elements
corresponding to data points within the region. Create a select-box control by tying the set of
selected data points to other elements, such as a filtered table.
See the Data Selection guide.
VictoryZoomContainer
VictoryZoomContainer provides pan and zoom behavior for any Victory component that works with an
x, y axis. Zoom events are controlled by scrolling, and panning events are controlled by dragging.
See the Pan and Zoom guide.
VictoryVoronoiContainer
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.
See the Tooltips guide.
Multiple Containers
Victory includes a createContainer helper that is used to create hybrid containers. createContainer can be used to create a new container with behaviors from two existing Victory containers.
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={({ datum }) => `${datum.x}, ${datum.y}`} /> } theme={VictoryTheme.clean} > <VictoryScatter data={data} /> </VictoryChart> ); render(<App/>);