Edit this page

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 apprear above others. Changing the order of rendered components can signicantly alter the appearance of a chart. Compare the following charts. The only 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 Victroy 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 completely 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.