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. Responsive containers will have 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>
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.
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.
<VictoryChart theme={VictoryTheme.clean} > <VictoryLine data={[ { x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 5 }, { x: 4, y: 4 }, { x: 5, y: 7 }, ]} /> </VictoryChart>
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.
<VictoryChart theme={VictoryTheme.clean} > <VictoryGroup offset={20} colorScale={"qualitative"} > <VictoryBar data={[ { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 5 }, ]} /> <VictoryBar data={[ { x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 7 }, ]} /> <VictoryBar data={[ { x: 1, y: 3 }, { x: 2, y: 4 }, { x: 3, y: 9 }, ]} /> </VictoryGroup> </VictoryChart>
Use VictoryGroup to render multiple charts without axes.
<VictoryGroup theme={VictoryTheme.clean} > <VictoryBar data={[ { x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 5 }, { x: 4, y: 4 }, { x: 5, y: 7 }, ]} /> <VictoryLine data={[ { x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 5 }, { x: 4, y: 4 }, { x: 5, y: 7 }, ]} /> </VictoryGroup>
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.
VictoryBrushContainer is useful for selecting a region of a larger dataset by domain. Create a
brush control by tying the domain of the selected region to the domain of a separate chart.
See the [brush and zoom guide][] for an example of using VictoryBrushContainer to create a brush
control.
VictoryBrushContainer is similar to VictorySelectionContainer. VictoryBrushContainer may be
used to identify the domain of a selected region, whereas VictorySelectionContainer may be used to
identify a list of data points within a selected region. VictoryBrushContainer will also create
persistent highlighted regions, whereas regions created by VictorySelectionContainer
disappear after onMouseUp events.
VictoryBrushContainer 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 containerComponent={ <VictoryBrushContainer brushDimension="x" brushDomain={{ x: [0.1, 0.3] }} /> } theme={VictoryTheme.clean} > <VictoryLine /> </VictoryChart>
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.
The cursor can also display a label for the active coordinates using the cursorLabel prop.
VictoryCursorContainer 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.
Note that the cursor allows you to inspect the entire domain, not just the data points. If you would like to instead highlight only the data points, consider using [VictoryVoronoiContainer][].
<VictoryScatter containerComponent={ <VictoryCursorContainer cursorLabel={({ datum }) => `${_.round(datum.x, 2)}, ${_.round( datum.y, 2, )}` } /> } />
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.
VictorySelectionContainer is similar to VictoryBrushContainer. VictoryBrushContainer may be
used to identify the domain of a selected region, whereas VictorySelectionContainer may be used to
identify a list of data points within a selected region. VictoryBrushContainer will also create
persistent highlighted regions, whereas regions created by VictorySelectionContainer
disappear after onMouseUp events.
VictorySelectionContainer 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 containerComponent={ <VictorySelectionContainer /> } theme={VictoryTheme.clean} > <VictoryScatter style={{ data: { fill: ({ active }) => active ? "tomato" : "gray", }, }} /> </VictoryChart>
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.
VictoryZoomContainer 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={ <VictoryZoomContainer /> } theme={VictoryTheme.clean} > <VictoryScatter y={(datum) => Math.sin(2 * Math.PI * datum.x) } /> </VictoryChart>
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. 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.
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, )}` } /> } theme={VictoryTheme.clean} > <VictoryLine y={(datum) => Math.sin(2 * Math.PI * datum.x) } /> </VictoryChart>
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/>);