Victory
Victory

About Docs Gallery Support GitHub FAQs

#
VictoryStack

`VictoryStack` is a wrapper component that renders a given set of children in a stacked layout. Like other wrapper components, `VictoryStack` also reconciles the domain and layout for all its children, and coordinates animations and shared events.

`VictoryStack` works with: VictoryArea, VictoryBar, VictoryCandlestick, VictoryErrorBar, VictoryGroup,VictoryLine, and VictoryScatter

`VictoryStack` should not be used with VictoryAxis children.

##
animate

`type: boolean || object`

`VictoryStack` uses the standard `animate` prop. Read about it here

See the Animations Guide for more detail on animations and transitions

note: `VictoryStack` controls the `animate` prop of its children when set

    animate={{
      duration: 2000,
      onLoad: { duration: 1000 }
    }}

##
categories

`type: array[string] || { x: array[string], y: array[string] }`

`VictoryStack` uses the standard `categories` prop. Read about it here

note: When this prop is set, `VictoryGroup` controls the `categories` prop of its children.

    categories={["dogs", "cats", "mice"]}

##
children

`type: element || array[element]`

`VictoryStack` works with any combination of the following children: VictoryArea, VictoryBar, VictoryCandlestick, VictoryErrorBar, VictoryGroup, VictoryLine, VictoryScatter, VictoryStack, and VictoryVoronoi. Children supplied to `VictoryGroup` will be cloned and rendered with new props so that all children share common props such as `domain` and `scale`.

##
colorScale

`type: array[string]`

The `colorScale` prop is an optional prop that defines a color scale to be applied to the children of `VictoryStack`. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: "grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue". `VictoryGroup` will assign colors to its children by index, unless they are explicitly specified in styles. Colors will repeat when there are more children than colors in the provided `colorScale`.

default (provided by default theme): See grayscale theme for more detail

##
containerComponent

`type: element`

`VictoryStack` uses the standard `containerComponent` prop. Read about it in detail here

    containerComponent={<VictoryVoronoiContainer/>}

##
domain

`type: array[low, high] || { x: [low, high], y: [low, high] }`

`VictoryStack` uses the standard `domain` prop. Read about it in detail here

note: `VictoryStack` controls the `domain` prop of its children.

    domain={{x: [0, 100], y: [0, 1]}}

##
domainPadding

`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`

`VictoryStack` uses the standard `domainPadding` prop. Read about it in detail here

note: `VictoryStack` controls the `domainPadding` prop of its children.

    domainPadding={{x: [10, -10], y: 5}}

##
eventKey

`type: string || integer || array[string] || function`

`VictoryStack` uses the standard `eventKey` prop to specify how event targets are addressed. This prop is not commonly used. Read about the `eventKey` prop in more detail here

    eventKey = "x";

##
events

`type: array[object]`

`VictoryStack` uses the standard `events` prop. Read about it in more detail here

See the Events Guide for more information on defining events.

Note: `VictoryStack` coordinates events between children using the `VictorySharedEvents` and the `sharedEvents` prop

##
externalEventMutations

`type: array[object]`

`VictoryStack` uses the standard `externalEventMutations` prop. Read about it in detail

##
groupComponent

`type: element`

`VictoryStack` uses the standard `groupComponent` prop. Read about it in detail here

default: `<g/>`

    groupComponent={<g transform="translate(10, 10)" />}

##
height

`type: number`

`VictoryStack` uses the standard `height` prop. Read about it here

default (provided by default theme): `height={300}`

    height={400}

##
horizontal

`type: boolean`

The `horizontal` prop determines whether the children supplied to `VictoryStack` will be laid out vertically or horizontally. The bars will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true. Read about the horizontal prop in detail

##
labelComponent

`type: element`

The `labelComponent` prop takes a component instance which will be used to render labels for each stack. The new element created from the passed `labelComponent` will be supplied with the following props: `x`, `y`, `index`, `datum`, `verticalAnchor`, `textAnchor`, `angle`, `style`, `text`, and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new VictoryLabel will be created with the props described above.

default: `<VictoryLabel/>`

    labelComponent={<VictoryLabel dy={20}/>}

##
labels

`type: array || function`

The `labels` prop defines labels that will appear above each stack of data. This prop should be given as an array of values or as a function. When this prop is given as a function, it will be evaluated for each label with the props corresponding to that label. If given as an array, the number of elements in the array should be equal to the length of the data array. Group labels will appear above the center series of the group, and will override the `labels` prop of child components. Omit this prop, and set `labels` props on children for individual labels.

    labels={["spring", "summer", "fall", "winter"]}`, `labels={({ datum }) => datum.title}

##
maxDomain

`type: number || { x: number, y: number }`

`VictoryStack` uses the standard `maxDomain` prop. Read about it in detail

##
minDomain

`type: number || { x: number, y: number }`

`VictoryStack` uses the standard `minDomain` prop. Read about it in detail

##
name

`type: string`

The `name` prop is used to reference a component instance when defining shared events.

    name = "series-1";

##
origin

`type: { x: number, y: number }`

The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually

Read about the `origin` prop in detail

##
padding

`type: number || { top: number, bottom: number, left: number, right: number }`

`VictoryStack` uses the standard `padding` prop. Read about it here

default (provided by default theme): `padding={50}`

    padding={{ top: 20, bottom: 60 }}

##
polar

`type: boolean`

`VictoryStack` uses the standard `polar` prop. Read about it here

##
range

`type: array[low, high] || { x: [low, high], y: [low, high] }`

The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually

Read about the `range` prop in detail

##
scale

`type: scale || { x: scale, y: scale }`

`VictoryStack` uses the standard `scale` prop. Read about it here Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` functions that correspond to these options.

note: `VictoryStack` controls the `scale` prop of its children.

default: `scale="linear"`

    scale={{x: "linear", y: "log"}}

##
sharedEvents

The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.

##
singleQuadrantDomainPadding

`type: boolean || { x: boolean, y: boolean }`

`VictoryStack` uses the standard `singleQuadrantDomainPadding` prop. Read about it here

##
standalone

`type: boolean`

`VictoryStack` uses the standard `standalone` prop. Read about it here

note: When `VictoryGroup` is nested within a component like `VictoryChart`, this prop will be set to `false`

default: `standalone={true}`

##
style

`type: { parent: object, data: object, labels: object }`

`VictoryStack` uses the standard `style` prop. Read about it here

Styles on children of `VictoryGroup` will override styles set on the `VictoryGroup` component.

default (provided by default theme): See grayscale theme for more detail

##
theme

`type: object`

`VictoryStack` uses the standard `theme` prop. Read about it here

See the Themes Guide for information about creating custom themes.

default: `theme={VictoryTheme.grayscale}`

    theme={VictoryTheme.material}

##
width

`type: number`

`VictoryStack` uses the standard `width` prop. Read about it here

default (provided by default theme): `width={450}`

    width={400}

##
xOffset

`type: number`

The `xOffset` prop is used for grouping stacks of bars. This prop will be set by the `VictoryGroup` component wrapper, or can be set manually.