Victory
Victory

About Docs Gallery Support GitHub FAQs

#
Layout

##
Default 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.

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

##
VictoryPortal

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`.

##
Altering 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.

##
Rendering components in custom containers

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`.