Layout

Victory components have default width, height, and padding props defined in the default grayscale 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.

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 only difference between the two is the order of the children in VictoryChart.

Some components, such as tooltips, 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.

caveats: VictoryPortal will not work with components that are not rendered within VictoryContainer.

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.

To render a Victory component in a custom container set the standalone prop on the component to false. The component will render a g tag rather than an svg tag.

caveats: VictoryPortal will not work with components that are not rendered within VictoryContainer.