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.

Supported Components

• VictoryArea
• VictoryBar
• VictoryCandlestick
• VictoryErrorBar
• VictoryGroup
• VictoryLine
• VictoryScatter
• VictoryHistogram - Only with other VictoryHistogram components

Unsupported Components

• VictoryVoronoi
• VictoryAxis

Example

Live View

Loading...

Live Editor

<VictoryChart
  theme={VictoryTheme.clean}
>
  <VictoryStack>
    <VictoryArea
      data={[
        { x: "a", y: 2 },
        { x: "b", y: 3 },
        { x: "c", y: 5 },
      ]}
    />
    <VictoryArea
      data={[
        { x: "a", y: 1 },
        { x: "b", y: 4 },
        { x: "c", y: 5 },
      ]}
    />
    <VictoryArea
      data={[
        { x: "a", y: 3 },
        { x: "b", y: 2 },
        { x: "c", y: 6 },
      ]}
    />
  </VictoryStack>
</VictoryChart>

Inherited Props

VictoryMultiLabelableProps

• labelComponent
• labels

VictoryCommonProps

• animate
• colorScale
• containerComponent
• disableInlineStyles
• domainPadding
• externalEventMutations
• groupComponent
• height
• horizontal
• maxDomain
• minDomain
• name
• origin
• padding
• polar
• range
• scale
• sharedEvents
• singleQuadrantDomainPadding
• standalone
• theme
• width

VictoryEventProps

• eventKey
• events

Component Props

---

categories

type: string[] | { x: string[], y: 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: ReactElement | ReactElement[]

Children supplied to VictoryGroup will be cloned and rendered with new props so that all children share common props such as domain and scale.

---

eventKey

type: string | integer | strin[] | 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

---

events

type: 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

Live View

Loading...

Live Editor

<VictoryChart
  theme={VictoryTheme.clean}
>
  <VictoryStack
    events={[
      {
        childName: "all",
        target: "data",
        eventHandlers: {
          onClick: () => {
            return [
              {
                childName: "area-2",
                target: "data",
                mutation: (props) => ({
                  style: Object.assign(
                    {},
                    props.style,
                    { fill: "gold" },
                  ),
                }),
              },
              {
                childName: "area-3",
                target: "data",
                mutation: (props) => ({
                  style: Object.assign(
                    {},
                    props.style,
                    { fill: "orange" },
                  ),
                }),
              },
              {
                childName: "area-4",
                target: "data",
                mutation: (props) => ({
                  style: Object.assign(
                    {},
                    props.style,
                    { fill: "red" },
                  ),
                }),
              },
            ];
          },
        },
      },
    ]}
  >
    <VictoryArea
      name="area-1"
      data={sampleData}
    />
    <VictoryArea
      name="area-2"
      data={sampleData}
    />
    <VictoryArea
      name="area-3"
      data={sampleData}
    />
    <VictoryArea
      name="area-4"
      data={sampleData}
    />
  </VictoryStack>
</VictoryChart>

---

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.

Live View

Loading...

Live Editor

<VictoryStack
  style={{
    data: {
      stroke: "black",
      strokeWidth: 3,
    },
  }}
>
  <VictoryBar
    style={{
      data: { fill: "#c43a31" },
    }}
    data={[
      { x: "a", y: 2 },
      { x: "b", y: 3 },
      { x: "c", y: 5 },
    ]}
  />
  <VictoryBar
    data={[
      { x: "a", y: 1 },
      { x: "b", y: 4 },
      { x: "c", y: 5 },
    ]}
  />
  <VictoryBar
    data={[
      { x: "a", y: 3 },
      { x: "b", y: 2 },
      { x: "c", y: 6 },
    ]}
  />
</VictoryStack>

---

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.