Victory
Victory

About Docs Gallery Support GitHub FAQs

#
VictoryChart

`VictoryChart` is a wrapper component that renders a given set of children on a set of Cartesian or polar axes. `VictoryChart` reconciles the domain for all its children, controls the layout of the chart, and coordinates animations and shared events. If no children are provided, `VictoryChart` will render a set of empty default axes.

##
animate

`type: boolean || object`

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

See the Animations Guide for more detail on animations and transitions

note: `VictoryChart` controls the `animate` prop of its children when set. To animate individual children of `VictoryChart`, set the `animate` prop only on children, and not on the `VictoryChart` wrapper.

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

##
backgroundComponent

`type: element`

The `backgroundComponent` prop takes a component instance which will be responsible for rendering a background if the `VictoryChart`'s `style` component includes `background` styles. The new element created from the passed `backgroundComponent` will be provided with the following properties calculated by `VictoryChart`: `height`, `polar`, `scale`, `style`, `x`, `y`, `width`. All of these props on `Background` should take prececence over what `VictoryChart` is trying to set.

default: `<Background/>`

    backgroundComponent={<Background/>}

##
children

`type: element || array[element]`

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

Note: polar charts must use `VictoryPolarAxis` rather than `VictoryAxis`

##
containerComponent

`type: element`

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

    containerComponent={<VictoryVoronoiContainer/>}

##
domain

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

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

note: `VictoryChart` 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] }`

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

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

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

##
endAngle

`type: number`

The `endAngle` props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with `startAngle` to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.

default: `endAngle={360}`

##
events

`type: array[object]`

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

See the Events Guide for more information on defining events.

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

##
externalEventMutations

`type: array[object]`

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

##
groupComponent

`type: element`

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

default: `<g/>`

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

##
height

`type: number`

`VictoryChart` uses the standard `height` prop. Read about it in detail here

note: `VictoryChart` controls the `height` prop of its children.

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

    height={400}

##
horizontal

`type: boolean`

The horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the independent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis.

default: horizontal={false}

##
innerRadius

`type: number`

When the `innerRadius` prop is set, polar charts will be hollow rather than circular.

##
maxDomain

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

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

##
minDomain

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

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

##
padding

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

`VictoryChart` uses the standard `padding` prop. Read about it in detail here

note: `VictoryChart` controls the `padding` prop of its children.

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

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

##
polar

`type: boolean`

`VictoryChart` uses the standard `polar` prop. Read about it in detail here

Notes:

- `VictoryChart` controls the `polar` prop of its children
- Polar charts should use `VictoryPolarAxis` rather than `VictoryAxis`

##
range

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

The `range` prop is usually calculated based on other props. It will not typically be necessary to set a `range` prop manually

note: `VictoryChart` controls the `range` prop of its children.

Read about the `range` prop in detail

##
scale

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

`VictoryChart` 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: `VictoryChart` 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 }`

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

##
standalone

`type: boolean`

`VictoryChart` uses the standard `standalone` prop. Read about it in detail here

note: `VictoryChart` sets `standalone={false} for all of its children.

default: `standalone={true}`

##
startAngle

`type: number`

The `startAngle` props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction with `endAngle` to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.

default: `startAngle={0}`

##
style

`type: { parent: object, background: object }`

`VictoryChart` uses the standard `style` prop. Read about it in detail here

note: custom valid svg style properties that are supported may be included in `background` styles.

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

##
theme

`type: object`

`VictoryChart` uses the standard `theme` prop. Read about it in detail here

See the Themes Guide for information about creating custom themes.

default: `theme={VictoryTheme.grayscale}`

    theme={VictoryTheme.material}

##
width

`type: number`

`VictoryChart` uses the standard `width` prop. Read about it in detail here

note: `VictoryChart` controls the `width` prop of its children.

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

    width={400}