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 precedence 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}